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

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

import React, { useState } from "react"; //Классы React
import PropTypes from "prop-types"; //Контроль свойств компонента
import { Dialog, DialogTitle, DialogContent, DialogActions, IconButton, Icon, Button, Box, Stack, Typography } 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}` +
                                            (cur.STYPE == "string"
                                                ? `${cur.fromValue ? `, значение "${cur.fromValue}"` : ""}`
                                                : `${cur.fromValue ? `, с ${cur.fromValue}` : ""}` + `${cur.toValue ? `, по ${cur.toValue}` : ""}`) +
                                            `${cur.SCOLOR ? `, ${cur.SCOLOR}` : ""}`
                                    }
                                ],
                                []
                            )}
                            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>
                    <Typography variant={"caption"}>
                        *Поддерживаются правила заливки, базирующиеся на дополнительных свойствах типа &quot;Строка&quot; или &quot;Число&quot;, из
                        профиля пользователя, настроенного для раздела &quot;События&quot; в WEB-интерфейсе данного приложения.
                    </Typography>
                </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 };
