/*
    Парус 8 - Панели мониторинга - ПУП - Информация о проектах
    Детальная информация об этапе проекта
*/

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

import React, { useState, useContext } from "react"; //Классы React
import PropTypes from "prop-types"; //Контроль свойств компонента
import { Grid, Box, Typography, Paper, Drawer, IconButton, Icon } from "@mui/material"; //Интерфейсные элементы
import { ApplicationCtx } from "../../context/application"; //Контекст приложения
import { BackEndCtx } from "../../context/backend"; //Контекст взаимодействия с сервером
import { MessagingCtx } from "../../context/messaging"; //Контекст сообщений
import { TEXTS } from "../../../app.text"; //Тектовые ресурсы и константы
import { P8PDataGrid, P8P_DATA_GRID_SIZE } from "../../components/p8p_data_grid"; //Таблица данных
import { P8PChart } from "../../components/p8p_chart"; //График
import { P8PAppInlineError } from "../../components/p8p_app_message"; //Встраиваемое сообщение об ошибке
import { P8P_DATA_GRID_CONFIG_PROPS } from "../../config_wrapper"; //Подключение компонентов к настройкам приложения
import { useStageDetailInfoDataGrid, useStageDetailArtsDataGrid, useStageDetailArtsChart } from "./stage_detail_hooks"; //Хуки детализации этапов проекта
import { Toggle } from "./layouts"; //Общая разметка и компоненты панели
import {
    STAGE_DETAIL_STYLES,
    stageDetailInfoHeadCellRender,
    stageDetailInfoDataCellRender,
    stageDetailArtsHeadCellRender,
    stageDetailArtsDataCellRender
} from "./stage_detail_layouts"; //Дополнительная разметка и вёрстка клиентских элементов

//------------------------------------
//Вспомогательные функции и компоненты
//------------------------------------

//Данные этапа
const StageDetailData = ({ stageRn }) => {
    //Собственное состояние
    const [state, setState] = useState({ artsDisplayType: 0, artsChartType: 0 });

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

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

    //Подключение к контексту сообщений
    const { showMsgErr } = useContext(MessagingCtx);

    //Отображение журнала затрат (фактического, по рег. номеру ЛС и статьи затрат)
    const showCostNotesFact = async ({ faceAccRn, artclRn }) => {
        const data = await executeStored({
            stored: "PKG_P8PANELS_PROJECTS.INFO_FCCOSTNOTES_FACT_SELECT",
            args: { NFACEACC: faceAccRn, NFPDARTCL: artclRn }
        });
        if (data.NIDENT) pOnlineShowUnit({ unitCode: "CostNotes", inputParameters: [{ name: "in_IDENT", value: data.NIDENT }] });
        else showMsgErr(TEXTS.NO_DATA_FOUND);
    };

    //Состояние таблицы с информацией об этапе
    const [stageDeatilInfoDataGrid] = useStageDetailInfoDataGrid({ stageRn });

    //Состояние таблицы с данными структуры цены
    const [stageDeatilArtsDataGrid] = useStageDetailArtsDataGrid({ stageRn });

    //Состояние графика с данными структуры цены
    const [stageDeatilArtsChart] = useStageDetailArtsChart({ stageRn, display: state.artsDisplayType == 1, type: state.artsChartType });

    //При изменении способа отображения структуры цены
    const handleArtsDisplayTypeChange = checked => setState(pv => ({ ...pv, artsDisplayType: checked ? 1 : 0 }));

    //При изменении типа данных графика структуры цены
    const handleArtsChartTypeChange = checked => setState(pv => ({ ...pv, artsChartType: checked ? 1 : 0 }));

    //Отработка нажатия на график
    const handleChartClick = ({ item }) =>
        state.artsChartType === 1 && item.NFACEACC && item.NFPDARTCL
            ? showCostNotesFact({ faceAccRn: item.NFACEACC, artclRn: item.NFPDARTCL })
            : null;

    //Генерация содержимого
    return (
        <Grid container spacing={2} sx={STAGE_DETAIL_STYLES.DATA_AREA_CONTAINER}>
            <Grid item xs={5}>
                <Typography variant={"h6"} sx={STAGE_DETAIL_STYLES.DATA_AREA_HEADER}>
                    Сведения
                </Typography>
                {stageDeatilInfoDataGrid.init ? (
                    <P8PDataGrid
                        {...P8P_DATA_GRID_CONFIG_PROPS}
                        containerComponentProps={{ sx: STAGE_DETAIL_STYLES.DATA_AREA, elevation: 6 }}
                        {...stageDeatilInfoDataGrid}
                        size={P8P_DATA_GRID_SIZE.SMALL}
                        fixedHeader={true}
                        headCellRender={stageDetailInfoHeadCellRender}
                        dataCellRender={stageDetailInfoDataCellRender}
                    />
                ) : null}
            </Grid>
            <Grid item xs={7}>
                <Box sx={STAGE_DETAIL_STYLES.DATA_AREA_HEADER_CONTAINER}>
                    <Typography variant={"h6"} sx={STAGE_DETAIL_STYLES.DATA_AREA_HEADER}>
                        Структура цены
                    </Typography>
                    <Toggle labels={["Таблица", "График"]} checked={state.artsDisplayType === 1} onChange={handleArtsDisplayTypeChange} />
                </Box>
                {state.artsDisplayType === 0 ? (
                    stageDeatilArtsDataGrid.init ? (
                        <P8PDataGrid
                            {...P8P_DATA_GRID_CONFIG_PROPS}
                            containerComponentProps={{ sx: STAGE_DETAIL_STYLES.DATA_AREA, elevation: 6 }}
                            {...stageDeatilArtsDataGrid}
                            size={P8P_DATA_GRID_SIZE.SMALL}
                            fixedHeader={true}
                            headCellRender={stageDetailArtsHeadCellRender}
                            dataCellRender={prms => stageDetailArtsDataCellRender({ ...prms, showCostNotesFact })}
                        />
                    ) : null
                ) : (
                    <Paper elevation={6} sx={STAGE_DETAIL_STYLES.DATA_AREA}>
                        <Box sx={STAGE_DETAIL_STYLES.CHART_CONTAINER}>
                            <Toggle labels={["План", "Факт"]} checked={state.artsChartType === 1} onChange={handleArtsChartTypeChange} />
                            {stageDeatilArtsDataGrid?.rows?.length > 0 ? (
                                stageDeatilArtsChart.init ? (
                                    <P8PChart style={STAGE_DETAIL_STYLES.CHART} {...stageDeatilArtsChart} onClick={handleChartClick} />
                                ) : null
                            ) : (
                                <P8PAppInlineError text={TEXTS.NO_DATA_FOUND} />
                            )}
                        </Box>
                    </Paper>
                )}
            </Grid>
        </Grid>
    );
};

//Контроль свойств компонента - Данные этапа
StageDetailData.propTypes = {
    stageRn: PropTypes.number
};

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

//Детальная информация об этапе проекта
const StageDetail = ({ stageRn, stageName, isOpen, onClose }) => {
    return (
        <Drawer anchor={"right"} open={isOpen} onClose={onClose} sx={STAGE_DETAIL_STYLES.STAGE_DETAIL_DRAWER}>
            <Box sx={STAGE_DETAIL_STYLES.STAGE_DETAIL_HEADER}>
                <IconButton sx={STAGE_DETAIL_STYLES.STAGE_DETAIL_CLOSE_BUTTON} size={"small"} onClick={onClose}>
                    <Icon>close</Icon>
                </IconButton>
                <Typography variant={"h6"} color={"white"} pl={2}>{`Этап: ${stageName}`}</Typography>
            </Box>
            <StageDetailData stageRn={stageRn} />
        </Drawer>
    );
};

//Контроль свойств компонента - Детальная информация об этапе проекта
StageDetail.propTypes = {
    stageRn: PropTypes.number,
    stageName: PropTypes.string,
    isOpen: PropTypes.bool.isRequired,
    onClose: PropTypes.func
};

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

export { StageDetail };
