/*
    Парус 8 - Панели мониторинга - Редакторы панелей
    Компонент: Редактор действия "Открыть панель"
*/

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

import React, { useState } from "react"; //Классы React
import PropTypes from "prop-types"; //Контроль свойств компонента
import { Box } from "@mui/material"; //Интерфейсные элементы
import { P8P_CA_DEF_TYPE_VALUE, P8P_CA_OPEN_PANEL_PARAMS_SHAPE } from "./common"; //Общие ресурсы действий
import { P8PCAFieldWithType } from "./field_with_type"; //Поле с выбором типа значения
import { PanelsManager } from "../../../panels/panels_editor/components/panels_manager/panels_manager"; //Менеджер панелей

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

//Стили
const STYLES = {
    CONTAINER_UNIT: { display: "flex", flexDirection: "column", gap: "10px" },
    BOX_SETTINGS: { display: "flex", flexDirection: "row", gap: "15px" }
};

//Ключ значений о странице
const SPROP_TAB = "tabValue";
//Ключа значений о панели
const SPROP_PANEL = "panelValue";

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

//Редактор действия "Открыть панель"
const P8PCAPanelOpenOptions = ({ panel, valueTypes, isValues, onStateChange, onValueSourceMenuClick }) => {
    //Собственное состояние - Отображение менеджера панелей
    const [openPanelsManager, setOpenPanelsManager] = useState(false);

    //При открытии менеджера панелей
    const handlePanelsManagerOpen = () => setOpenPanelsManager(true);

    //При закрытии менеджера панелей
    const handlePanelsManagerClose = () => setOpenPanelsManager(false);

    //При выборе панели в менеджере панелей
    const handlePanelSelect = selectedPanel => {
        //Устанавливаем мнемокод выбранной панели
        onStateChange({ ...panel, panelValue: { ...panel.panelValue, value: selectedPanel.code } });
        //Закрываем менеджер панелей
        handlePanelsManagerClose();
    };

    //При изменении типа значения
    const handleValueTypeChange = (value, keyProp) =>
        onStateChange({
            [keyProp]: { type: value, value: "" }
        });

    //При изменении значения
    const handleValueChange = (value, keyProp) =>
        onStateChange({
            [keyProp]: { ...panel[keyProp], value: value }
        });

    //При очистке значения
    const handleClearValueClick = keyProp =>
        onStateChange({
            [keyProp]: { ...panel[keyProp], value: "" }
        });

    //При изменении переменной
    const handleValueSourceChange = (valueSource, keyProp) =>
        onStateChange({
            [keyProp]: { ...panel[keyProp], value: valueSource }
        });

    //При нажатии на выбор переменной
    const handleValueSourceSelect = (e, keyProp) =>
        isValues
            ? onValueSourceMenuClick &&
              onValueSourceMenuClick(e, valueSource => {
                  handleValueSourceChange(valueSource, keyProp);
              })
            : null;

    //Формирование представления
    return (
        <Box sx={STYLES.CONTAINER_UNIT}>
            {openPanelsManager && (
                <PanelsManager
                    current={panel.panelValue.value}
                    isEditable={false}
                    onPanelSelect={handlePanelSelect}
                    onCancel={handlePanelsManagerClose}
                />
            )}
            <Box sx={STYLES.BOX_SETTINGS}>
                <P8PCAFieldWithType
                    valueTypes={valueTypes}
                    name={SPROP_TAB}
                    valueLabel={"Наименование вкладки"}
                    groupLabel={"Настройки вкладки"}
                    item={panel.tabValue}
                    isValueReadOnly={panel.tabValue.type === P8P_CA_DEF_TYPE_VALUE.VARIABLE}
                    onTypeChange={e => handleValueTypeChange(e.target.value, SPROP_TAB)}
                    onValueChange={e => handleValueChange(e.target.value, SPROP_TAB)}
                    endAdornments={[
                        { icon: "clear", onClick: () => handleClearValueClick(SPROP_TAB), isDisabled: false },
                        {
                            icon: "settings_ethernet",
                            onClick: e => handleValueSourceSelect(e, SPROP_TAB),
                            isDisabled: panel.tabValue.type !== P8P_CA_DEF_TYPE_VALUE.VARIABLE
                        }
                    ]}
                />
                <P8PCAFieldWithType
                    valueTypes={valueTypes}
                    name={SPROP_PANEL}
                    valueLabel={"Панель"}
                    groupLabel={"Настройки панели"}
                    item={panel.panelValue}
                    isValueReadOnly={panel.panelValue.type === P8P_CA_DEF_TYPE_VALUE.VARIABLE}
                    onTypeChange={e => handleValueTypeChange(e.target.value, SPROP_PANEL)}
                    onValueChange={e => handleValueChange(e.target.value, SPROP_PANEL)}
                    endAdornments={[
                        { icon: "clear", onClick: () => handleClearValueClick(SPROP_PANEL), isDisabled: false },
                        {
                            icon: "list",
                            onClick: handlePanelsManagerOpen,
                            isDisabled: panel.panelValue.type === P8P_CA_DEF_TYPE_VALUE.VARIABLE
                        },
                        {
                            icon: "settings_ethernet",
                            onClick: e => handleValueSourceSelect(e, SPROP_PANEL),
                            isDisabled: panel.panelValue.type !== P8P_CA_DEF_TYPE_VALUE.VARIABLE
                        }
                    ]}
                />
            </Box>
        </Box>
    );
};

//Контроль свойств - редактор действия "Открыть панель"
P8PCAPanelOpenOptions.propTypes = {
    panel: P8P_CA_OPEN_PANEL_PARAMS_SHAPE,
    valueTypes: PropTypes.array,
    isValues: PropTypes.bool.isRequired,
    onStateChange: PropTypes.func.isRequired,
    onValueSourceMenuClick: PropTypes.func.isRequired
};

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

export { P8PCAPanelOpenOptions };
