/*
    Парус 8 - Панели мониторинга - УДП - Доски задач
    Компонент: Диалог дополнительных настроек
*/

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

import React, { useState } from "react"; //Классы React
import PropTypes from "prop-types"; //Контроль свойств компонента
import { Dialog, DialogTitle, DialogContent, DialogActions, IconButton, Icon, Button, Box, Stack } from "@mui/material"; //Интерфейсные компоненты
import { CustomInputField } from "./custom_input_field.js"; //Кастомное поле ввода
import { sortAttrs, sortDest } from "../layouts.js"; //Допустимые значение поля и направления сортировки
import { hasValue } from "../../../core/utils.js"; //Проверка наличия значения
import { COMMON_STYLES } from "../styles"; //Общие стили

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

//Стили
const STYLES = {
    SELECT: { width: "100%" }
};

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

//Диалог дополнительных настроек
const SettingsDialog = ({ initial, onSettingsChange, onClose, ...other }) => {
    //Состояние дополнительных настроек
    const [colorRules, seColorRules] = useState(initial.colorRules);

    //Состояние статусов
    const [statusesState, setStatusesState] = useState(initial.statusesState);

    //Изменение поля сортировки
    const handleSortAttrChange = (item, value) => setStatusesState(pv => ({ ...pv, [item]: value }));

    //Изменение направления сортировки
    const handleSortDestChange = newDirection => setStatusesState(pv => ({ ...pv, direction: newDirection }));

    //При изменении правила заливки событий
    const handleColorRuleChange = (item, value) => {
        //Определяем новое правило заливки
        let newColorRule = colorRules.rules[value];
        //Обновляем в основных настройках
        seColorRules(pv => ({ ...pv, selectedColorRule: newColorRule ? newColorRule : {} }));
    };

    //Генерация содержимого
    return (
        <div {...other}>
            <Dialog open onClose={onClose} fullWidth maxWidth="sm">
                <DialogTitle>Настройки</DialogTitle>
                <IconButton aria-label="close" onClick={onClose} sx={COMMON_STYLES.DIALOG_CLOSE_BUTTON}>
                    <Icon>close</Icon>
                </IconButton>
                <DialogContent sx={COMMON_STYLES.SCROLL}>
                    <Box component="section" p={1}>
                        <CustomInputField
                            elementCode="clrRules"
                            elementValue={hasValue(colorRules.selectedColorRule.id) && colorRules.length !== 0 ? colorRules.selectedColorRule.id : -1}
                            labelText="Заливка событий"
                            items={colorRules.rules.reduce((prev, cur) => [...prev, { id: cur.id, caption: cur.SDP_NAME }], [])}
                            emptyItem={{ key: -1, id: -1, caption: "-" }}
                            onChange={handleColorRuleChange}
                            sx={STYLES.SELECT}
                        />
                    </Box>
                    <Box component="section" p={1}>
                        <Stack direction="row" sx={COMMON_STYLES.STACK_DOCLINKS}>
                            <CustomInputField
                                elementCode="attr"
                                elementValue={statusesState.attr}
                                labelText="Поле сортировки"
                                items={sortAttrs.reduce((prev, cur) => [...prev, { id: cur.id, caption: cur.descr }], [])}
                                onChange={handleSortAttrChange}
                                sx={STYLES.SELECT}
                            />
                            <IconButton
                                title={statusesState.direction === "asc" ? "По возрастанию" : "По убыванию"}
                                onClick={() => handleSortDestChange(sortDest[sortDest.indexOf(statusesState.direction) * -1])}
                            >
                                <Icon>{statusesState.direction === "asc" ? "arrow_upward" : "arrow_downward"}</Icon>
                            </IconButton>
                        </Stack>
                    </Box>
                </DialogContent>
                <DialogActions sx={COMMON_STYLES.DIALOG_ACTIONS}>
                    <Button
                        variant="text"
                        onClick={() => {
                            onSettingsChange(colorRules, statusesState);
                            onClose();
                        }}
                    >
                        ОК
                    </Button>
                    <Button
                        variant="text"
                        onClick={() => {
                            seColorRules(pv => ({ ...pv, selectedColorRule: {} }));
                            setStatusesState(pv => ({ ...pv, attr: "SEVNSTAT_NAME", direction: "asc" }));
                        }}
                    >
                        Очистить
                    </Button>
                    <Button variant="text" onClick={onClose}>
                        Отмена
                    </Button>
                </DialogActions>
            </Dialog>
        </div>
    );
};

//Контроль свойств компонента - Диалог дополнительных настроек
SettingsDialog.propTypes = {
    initial: PropTypes.object.isRequired,
    onSettingsChange: PropTypes.func.isRequired,
    onClose: PropTypes.func.isRequired
};

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

export { SettingsDialog };