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

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

import React, { useState, useEffect } from "react"; //Классы React
import PropTypes from "prop-types"; //Контроль свойств компонента
import { Box, TextField, InputAdornment, Icon, IconButton } from "@mui/material"; //Интерфейсные элементы MUI
import { P8PDialog, P8P_DIALOG_WIDTH } from "../../../../components/p8p_dialog"; //Типовой диалог
import { P8PComponentInlineMessage } from "../../../../components/editors/p8p_component_inline_message"; //Типовое встраиваемое сообщение
import { AttrsList } from "./attrs_list"; //Список атрибутов сущности
import { AttrSetupDialog } from "./attr_setup_dialog"; //Диалог настройки атрибута
import { useEntityAttrs } from "./hooks"; //Хуки диалога настройки атрибутов сущности

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

//Стили
const STYLES = {
    LIST_CONTAINER: { width: "100%", height: "500px" }
};

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

//Диалог настройки атрибутов сущности
const EntityAttrsDialog = ({ query, id, title, onOk, onCancel }) => {
    //Собственное состояние - фильтр атрибутов
    const [filter, setFilter] = useState("");

    //Собственное состояние - список атрибутов
    const [attrs, setAttrs] = useState([]);

    //Собственное состояние - настраиваемый атрибут
    const [setupAttr, setSetupAttr] = useState(null);

    //Хук для взаимодействия с сервером
    const [srvAttrs, saveAttrs] = useEntityAttrs(query, id);

    //Нажатие на кнопку "Ok"
    const handleOk = async () => {
        await saveAttrs(attrs);
        onOk && onOk();
    };

    //Нажатие на кнопку "Отмена"
    const handleCancel = () => onCancel && onCancel();

    //Выбор/исключение атрибута из запроса
    const handleAttrSelect = attr =>
        setAttrs(
            attrs.map(a => ({
                ...(a.id === attr.id ? { ...a, use: a.use === 1 ? 0 : 1, show: a.use === 1 ? 0 : a.show } : a)
            }))
        );

    //Отображение/сокрытие атрибута в запросе
    const handleAttrShow = attr =>
        setAttrs(
            attrs.map(a => ({
                ...(a.id === attr.id ? { ...a, show: a.show === 1 ? 0 : 1, use: a.show === 0 ? 1 : a.use } : a)
            }))
        );

    //Настройка атрибута
    const handleAttrSetup = attr => setSetupAttr({ ...attr });

    //При закрытии диалога настройки атрибута по "ОК"
    const handleAttrSetupOk = values => {
        setAttrs(
            attrs.map(a => ({
                ...(a.id === setupAttr.id ? { ...a, use: 1, alias: values.alias } : a)
            }))
        );
        setSetupAttr(null);
    };

    const handleAttrSetupCancel = () => setSetupAttr(null);

    //При изменении значения фильтра
    const handleFilterChange = e => setFilter(e.target.value);

    //При очистке фильтра
    const handleFilterClear = () => setFilter("");

    //При загрузке данных с сервера
    useEffect(() => {
        if (srvAttrs) setAttrs(srvAttrs.map(srvAttr => ({ ...srvAttr })));
    }, [srvAttrs]);

    //Рег. выражение для фильтра
    const filterRegExp = filter ? new RegExp(filter, "i") : null;

    //Отфильтрованные для отображения атрибуты
    const filteredAttrs = attrs.filter(attr => (filterRegExp ? filterRegExp.test(attr.name) || filterRegExp.test(attr.title) : true));

    //Флаг отображения списка атрибутов
    const displayAttrsList = attrs.length == 0 ? null : filteredAttrs.length > 0 ? true : false;

    //Генерация содержимого
    return (
        <P8PDialog title={`Атрибуты сущности "${title}"`} width={P8P_DIALOG_WIDTH.SM} fullWidth onOk={handleOk} onCancel={handleCancel}>
            {setupAttr && <AttrSetupDialog attr={setupAttr} onOk={handleAttrSetupOk} onCancel={handleAttrSetupCancel} />}
            <TextField
                margin={"normal"}
                variant={"standard"}
                fullWidth
                placeholder={"Поиск атрибута..."}
                value={filter}
                onChange={handleFilterChange}
                InputProps={{
                    startAdornment: (
                        <InputAdornment position={"start"}>
                            <Icon>search</Icon>
                        </InputAdornment>
                    ),
                    endAdornment: (
                        <InputAdornment position={"end"}>
                            <IconButton onClick={handleFilterClear}>
                                <Icon>clear</Icon>
                            </IconButton>
                        </InputAdornment>
                    )
                }}
            />
            <Box sx={STYLES.LIST_CONTAINER} justifyContent={"center"} alignItems={"center"} display={"flex"}>
                {displayAttrsList === true && (
                    <AttrsList attrs={filteredAttrs} filter={filter} onSelect={handleAttrSelect} onShow={handleAttrShow} onSetup={handleAttrSetup} />
                )}
                {displayAttrsList === false && (
                    <P8PComponentInlineMessage
                        name={"Нет данных, соответствующих фильтру"}
                        message={"Измените значение фильтра для повторного поиска"}
                    />
                )}
            </Box>
        </P8PDialog>
    );
};

//Контроль свойств - Диалог настройки атрибутов сущности
EntityAttrsDialog.propTypes = {
    query: PropTypes.number.isRequired,
    id: PropTypes.string.isRequired,
    title: PropTypes.string.isRequired,
    onOk: PropTypes.func,
    onCancel: PropTypes.func
};

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

export { EntityAttrsDialog };
