/*
    Парус 8 - Панели мониторинга - УДП - Доски задач
    Компонент: Выпадающий список выбора заливки событий
*/

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

import React, { useEffect, useState } from "react"; //Классы React
import PropTypes from "prop-types"; //Контроль свойств компонента
import { FormControl, InputLabel, Select, MenuItem } from "@mui/material"; //Интерфейсные компоненты
import { useColorRules } from "../hooks.js"; //Вспомогательные хуки
import { APP_STYLES } from "../../../../app.styles"; //Типовые стили

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

//Стили
const STYLES = {
    SELECT_MENU: w => {
        return { overflowY: "auto", ...APP_STYLES.SCROLL, width: w ? w : null };
    }
};

//---------------
//Тело компонента
//---------------

//Выпадающий список выбора заливки событий
const RulesSelect = ({ initRule, handleChange, ...other }) => {
    //Состояние пользовательских настроек заливки событий
    const [colorRules] = useColorRules();

    //Собственное состояние
    const [curRule, setCurRule] = useState(initRule > -1 ? "" : initRule);

    //При получении нового значения заливки из вне
    useEffect(() => {
        if (
            (colorRules.loaded && initRule > -1 && curRule === "") ||
            (Number.isInteger(initRule) && Number.isInteger(curRule) && initRule !== curRule)
        )
            setCurRule(initRule);
    }, [colorRules, curRule, initRule]);

    //При изменении заливки событий
    const handleRuleChange = e => {
        let id = e.target.value;
        setCurRule(id);
        handleChange(id > -1 ? colorRules.rules[id] : {});
    };

    //Генерация содержимого
    return colorRules ? (
        <FormControl size="small" variant="standard" {...other}>
            <InputLabel htmlFor="clrRules">Заливка событий</InputLabel>
            <Select
                id="clrRules"
                name="clrRules"
                value={curRule}
                aria-describedby="clrRules-helper-text"
                label="Заливка событий"
                MenuProps={{ slotProps: { paper: { sx: STYLES.SELECT_MENU(document.getElementById("clrRules")?.parentElement.clientWidth) } } }}
                onChange={handleRuleChange}
            >
                <MenuItem key={-1} value={-1}>
                    {"-"}
                </MenuItem>
                {colorRules.rules
                    ? colorRules.rules.map((item, i) => (
                          <MenuItem key={i} value={item.id}>
                              {item.propName}
                          </MenuItem>
                      ))
                    : null}
            </Select>
        </FormControl>
    ) : null;
};

//Контроль свойств - Выпадающий список выбора заливки событий
RulesSelect.propTypes = {
    initRule: PropTypes.number.isRequired,
    handleChange: PropTypes.func.isRequired
};

//--------------------
//Интерфейс компонента
//--------------------

export { RulesSelect };