/*
    Парус 8 - Панели мониторинга - ПУП - Графики проектов
    Панель мониторинга: Корневая панель графиков проекта
*/

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

import React, { useState, useContext, useCallback, useEffect } from "react"; //Классы React
import { Grid, Box } from "@mui/material"; //Интерфейсные элементы
import { APP_BAR_HEIGHT } from "../../components/p8p_app_workspace"; //Заголовок страницы
import { APP_STYLES } from "../../../app.styles"; //Типовые стили
import { P8PDataGrid, P8P_DATA_GRID_SIZE } from "../../components/p8p_data_grid"; //Таблица данных
import { P8P_DATA_GRID_CONFIG_PROPS } from "../../config_wrapper"; //Подключение компонентов к настройкам приложения
import { ApplicationСtx } from "../../context/application"; //Контекст приложения
import { BackEndСtx } from "../../context/backend"; //Контекст взаимодействия с сервером
import { dataCellRender, groupCellRender } from "./layouts"; //Дополнительная разметка и вёрстка клиентских элементов

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

//Стили
const STYLES = {
    DATA_GRID_CONTAINER: { height: `calc(100vh - ${APP_BAR_HEIGHT})`, width: "100vw", ...APP_STYLES.SCROLL }
};

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

//Графики проектов
const PrjGraph = () => {
    //Собственное состояние - таблица данных
    const [dataGrid, setdataGrid] = useState({
        dataLoaded: false,
        columnsDef: [],
        groups: [],
        rows: [],
        reload: true,
        fixedHeader: false,
        fixedColumns: 0
    });

    //Подключение к контексту приложения
    const { pOnlineShowDocument } = useContext(ApplicationСtx);

    //Подключение к контексту взаимодействия с сервером
    const { executeStored } = useContext(BackEndСtx);

    //Загрузка данных таблицы с сервера
    const loadData = useCallback(async () => {
        if (dataGrid.reload) {
            const data = await executeStored({ stored: "PKG_P8PANELS_PROJECTS.GRAPH", args: {}, respArg: "COUT" });
            setdataGrid(pv => ({
                ...pv,
                ...data.XDATA_GRID,
                columnsDef: data.XDATA_GRID.columnsDef ? [...data.XDATA_GRID.columnsDef] : pv.columnsDef,
                rows: [...(data.XDATA_GRID.rows || [])],
                groups: [...(data.XDATA_GRID.groups || [])],
                dataLoaded: true,
                reload: false
            }));
        }
    }, [dataGrid.reload, executeStored]);

    //При необходимости обновить данные таблицы
    useEffect(() => {
        loadData();
    }, [dataGrid.reload, loadData]);

    //Генерация содержимого
    return (
        <Grid container>
            <Grid item xs={12}>
                <Box display="flex" justifyContent="center" alignItems="center">
                    {dataGrid.dataLoaded ? (
                        <P8PDataGrid
                            {...P8P_DATA_GRID_CONFIG_PROPS}
                            columnsDef={dataGrid.columnsDef}
                            groups={dataGrid.groups}
                            rows={dataGrid.rows}
                            size={P8P_DATA_GRID_SIZE.LARGE}
                            reloading={dataGrid.reload}
                            fixedHeader={dataGrid.fixedHeader}
                            fixedColumns={dataGrid.fixedColumns}
                            dataCellRender={prms => dataCellRender({ ...prms, pOnlineShowDocument })}
                            groupCellRender={prms => groupCellRender({ ...prms, pOnlineShowDocument })}
                            containerComponentProps={{
                                elevation: 0,
                                sx: STYLES.DATA_GRID_CONTAINER
                            }}
                        />
                    ) : null}
                </Box>
            </Grid>
        </Grid>
    );
};

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

export { PrjGraph };