/*
    Парус 8 - Панели мониторинга - Редактор панелей
    Элемент макета
*/

//---------------------
//Подключение библиотек
//---------------------

import React from "react"; //Классы React
import PropTypes from "prop-types"; //Контроль свойств компонента
import { IconButton, Icon, Stack } from "@mui/material"; //Интерфейсные элементы
import "./panels_editor.css"; //Кастомные стили

//---------
//Константы
//---------

//Стили
const STYLES = {
    CONTAINER: selected => ({ zIndex: 1100, ...(selected ? { border: "2px dotted green" } : {}) }),
    STACK_TOOLS: { position: "absolute", zIndex: 1200, height: "100%", backgroundColor: "#c0c0c07f" }
};

//-----------
//Тело модуля
//-----------

//Элемент макета
// eslint-disable-next-line react/display-name
const LayoutItem = React.forwardRef(
    (
        { style, className, onMouseDown, onMouseUp, onTouchEnd, children, onSettingsClick, onDeleteClick, item, editMode = false, selected = false },
        ref
    ) => {
        //При нажатии на настройки
        const handleSettingsClick = () => onSettingsClick && onSettingsClick(item.i);

        //При нажатии на удаление
        const handleDeleteClick = () => onDeleteClick && onDeleteClick(item.i);

        //Формирование представления
        return (
            <div
                style={{ ...style, ...STYLES.CONTAINER(selected) }}
                className={`${className} layout-item__container`}
                ref={ref}
                onMouseDown={onMouseDown}
                onMouseUp={onMouseUp}
                onTouchEnd={onTouchEnd}
            >
                {editMode && (
                    <Stack direction={"column"} sx={STYLES.STACK_TOOLS}>
                        <IconButton onClick={handleSettingsClick}>
                            <Icon>settings</Icon>
                        </IconButton>
                        <IconButton onClick={handleDeleteClick}>
                            <Icon>delete</Icon>
                        </IconButton>
                    </Stack>
                )}
                {children}
            </div>
        );
    }
);

//Контроль свойств компонента - элемент макета
LayoutItem.propTypes = {
    style: PropTypes.object,
    className: PropTypes.string,
    onMouseDown: PropTypes.func,
    onMouseUp: PropTypes.func,
    onTouchEnd: PropTypes.func,
    children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
    onSettingsClick: PropTypes.func,
    onDeleteClick: PropTypes.func,
    item: PropTypes.object.isRequired,
    editMode: PropTypes.bool,
    selected: PropTypes.bool
};

//----------------
//Интерфейс модуля
//----------------

export { LayoutItem };