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

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

import React, { useState } from "react"; //Классы React
import { Box, Grid, Button, Icon } from "@mui/material"; //Интерфейсные компоненты MUI
import { APP_BAR_HEIGHT } from "../../components/p8p_app_workspace"; //Компоненты рабочего стола
import { P8PEditorToolBar } from "../../components/editors/p8p_editor_toolbar"; //Панель инструментов редактора
import { BUTTONS } from "../../../app.text"; //Общие текстовые ресурсы приложения
import { QueryDiagram } from "./components/query_diagram/query_diagram"; //Диаграмма запроса
import { QueriesManager } from "./components/queries_manager/queries_manager"; //Менеджер запросов
import { EntityAddDialog } from "./components/entity_add_dialog/entity_add_dialog"; //Диалог добавления сущности
import { P8PEditorBox } from "../../components/editors/p8p_editor_box"; //Контейнер параметров редактора
import { P8PEditorSubHeader } from "../../components/editors/p8p_editor_sub_header"; //Подзаголовок группы параметров редактора
import { useQueryDesc } from "./hooks"; //Пользовательские хуки

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

//Стили
const STYLES = {
    CONTAINER: { display: "flex" },
    GRID_CONTAINER: { height: `calc(100vh - ${APP_BAR_HEIGHT})` },
    GRID_ITEM_INSPECTOR: { backgroundColor: "#e9ecef" }
};

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

//Корневой компонент редактора запросов
const QueryEditor = () => {
    //Текущий запрос
    const [query, setQuery] = useState(null);

    //Отображения менеджера запросов
    const [openQueriesManager, setOpenQueriesManager] = useState(true);

    //Отображение диалога добавления сущности
    const [openEntityAddDialog, setOpenEntityAddDialog] = useState(false);

    //Получение данных запроса
    const [queryDiagram, addEnt, removeEnt, setEntPosition, addRl, removeRl] = useQueryDesc(query);

    //Обработка изменения положения сущности на диаграмме
    const handleEntityPositionChange = (ent, position) => setEntPosition(ent, position.x, position.y);

    //Обработка удаления сущности из запроса
    const handleEntityRemove = ent => removeEnt(ent);

    //Обработка добавления отношения cущностей
    const handleRelationAdd = (source, target) => addRl(source, target);

    //Обработка удаления отношения cущностей
    const handleRelationRemove = rl => removeRl(rl);

    //Открытие менеджера запросов
    const handleOpenQueriesManager = () => setOpenQueriesManager(true);

    //Закрытие менеджера запросов
    const handleCancelQueriesManager = () => setOpenQueriesManager(false);

    //Закрытие запроса
    const handleQueryClose = () => setQuery(null);

    //При выборе запроса
    const handleQuerySelect = query => {
        setQuery(query);
        setOpenQueriesManager(false);
    };

    //При добавлении сущности в запрос
    const handleEntityAdd = () => setOpenEntityAddDialog(true);

    //Закрытие диалога добавления сущности по "ОК"
    const handleEntityAddDialogOk = async values => {
        await addEnt(values.name, "VIEW");
        setOpenEntityAddDialog(false);
    };

    //Закрытие диалога добавления сущности по "ОК"
    const handleEntityAddDialogCancel = () => setOpenEntityAddDialog(false);

    //Панель инструмментов
    const toolBar = (
        <P8PEditorToolBar
            items={[
                { icon: "file_open", title: "Менеджер запросов", onClick: handleOpenQueriesManager },
                { icon: "close", title: "Закрыть запрос", onClick: handleQueryClose, disabled: !query }
            ]}
        />
    );

    //Генерация содержимого
    return (
        <Box sx={STYLES.CONTAINER}>
            {openQueriesManager && <QueriesManager current={query} onQuerySelect={handleQuerySelect} onCancel={handleCancelQueriesManager} />}
            {openEntityAddDialog && <EntityAddDialog onOk={handleEntityAddDialogOk} onCancel={handleEntityAddDialogCancel} />}
            <Grid container sx={STYLES.GRID_CONTAINER} columns={25}>
                <Grid item xs={20}>
                    {queryDiagram && (
                        <QueryDiagram
                            {...queryDiagram}
                            onEntityPositionChange={handleEntityPositionChange}
                            onEntityRemove={handleEntityRemove}
                            onRelationAdd={handleRelationAdd}
                            onRelationRemove={handleRelationRemove}
                        />
                    )}
                </Grid>
                <Grid item xs={5} sx={STYLES.GRID_ITEM_INSPECTOR}>
                    {toolBar}
                    {query && (
                        <P8PEditorBox title={"Параметры запроса"}>
                            <P8PEditorSubHeader title={"Сущности"} />
                            <Button startIcon={<Icon>add</Icon>} onClick={handleEntityAdd}>
                                {BUTTONS.INSERT}
                            </Button>
                        </P8PEditorBox>
                    )}
                </Grid>
            </Grid>
        </Box>
    );
};

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

export { QueryEditor };