/*
    Парус 8 - Панели мониторинга - РО - Редактор настройки регламентированного отчёта
    Панель мониторинга: Корневая панель редактора
*/

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

import React, { useState, useEffect, useContext } from "react"; //Классы React
import { Grid } from "@mui/material"; //Интерфейсные компоненты
import { APP_BAR_HEIGHT } from "../../components/p8p_app_workspace"; //Рабочая область приложения
import { NavigationCtx } from "../../context/navigation"; //Контекст навигации
import { Sections } from "./components/sections"; //Список разделов настройки
import { Section } from "./components/section"; //Раздел настройки

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

//Стили
const STYLES = {
    GRID_MAIN_CONTAINER: { height: `calc(100vh - ${APP_BAR_HEIGHT})` },
    GRID_MAIN_SECTIONS_ITEM: fullHeight => ({ ...(fullHeight ? { height: "100%" } : {}) }),
    GRID_SECTIONS_CONTAINER: { width: "100vw", height: "100%" },
    GRID_SECTION_CONTAINER: { height: "100%" }
};

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

//Редактор настройки регламентированного отчёта
const RrpConfEditor = () => {
    //Редактируемая настройка
    const [conf, setConf] = useState(null);

    //Текущий раздел настройки
    const [section, setSection] = useState(null);

    //Текущее количество разделов настройки
    const [sectionsCount, setSectionsCount] = useState(0);

    //Подключение к контексту навигации
    const { getNavigationSearch } = useContext(NavigationCtx);

    //Изменение текущего раздела настройки
    const handleSectionChange = section => setSection(section);

    //Изменение количества разделов настройки
    const handleSectionsCountChange = sectionsCount => setSectionsCount(sectionsCount);

    //При подключении к странице
    useEffect(() => {
        setConf(Number(getNavigationSearch().NRN));
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);

    //Генерация содержимого
    return (
        <Grid container direction={"column"} sx={STYLES.GRID_MAIN_CONTAINER}>
            <Grid item sx={STYLES.GRID_MAIN_SECTIONS_ITEM(sectionsCount === 0)}>
                <Grid container sx={STYLES.GRID_SECTIONS_CONTAINER}>
                    <Sections conf={conf} onSectionChange={handleSectionChange} onSectionCountChange={handleSectionsCountChange} />
                </Grid>
            </Grid>
            {sectionsCount > 0 && (
                <Grid item xs>
                    <Grid container direction={"row"} sx={STYLES.GRID_SECTION_CONTAINER}>
                        <Section section={section} />
                    </Grid>
                </Grid>
            )}
        </Grid>
    );
};

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

export { RrpConfEditor };
