/*
    Парус 8 - Панели мониторинга - ПУП - Производственная программа
    Панель мониторинга: Корневая панель производственной программы
*/

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

import React, { useContext, useState, useCallback, useEffect } from "react"; //Классы React
import PropTypes from "prop-types"; //Контроль свойств компонента
import {
    Drawer,
    Fab,
    Box,
    List,
    ListItem,
    ListItemButton,
    ListItemText,
    ListItemIcon,
    Icon,
    IconButton,
    Typography,
    Grid,
    TextField,
    Select,
    MenuItem,
    InputLabel,
    FormGroup,
    FormControlLabel,
    Checkbox,
    Button,
    Dialog,
    DialogContent,
    DialogActions,
    Card,
    CardHeader,
    CardContent,
    CardActions,
    Tooltip
} from "@mui/material"; //Интерфейсные элементы
import { BackEndCtx } from "../../context/backend"; //Контекст взаимодействия с сервером
import { MessagingCtx } from "../../context/messaging"; //Контекст сообщений
import { NavigationCtx } from "../../context/navigation"; //Контекст навигации
import { P8P_GANTT_CONFIG_PROPS } from "../../config_wrapper"; //Подключение компонентов к настройкам приложения
import { APP_BAR_HEIGHT } from "../../components/p8p_app_workspace"; //Заголовок страницы
import { APP_STYLES } from "../../../app.styles"; //Типовые стили
import { P8PGantt, taskLegendDesc } from "../../components/p8p_gantt"; //Диаграмма Ганта
import { xml2JSON, formatDateJSONDateOnly, formatDateRF, hasValue } from "../../core/utils"; //Вспомогательные функции
import { useFilteredPlanCtlgs } from "./hooks"; //Вспомогательные хуки
import { CostRouteListsDataGrid } from "./datagrids/fcroutlst"; //Таблица "Маршрутные листы"
import { IncomFromDepsDataGrid } from "./datagrids/incomefromdeps"; //Таблица "Приходы из подразделений"

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

//Склонения для документов
const PLANS_DECLINATIONS = ["план", "плана", "планов"];
const SPEC_DECLINATIONS = ["элемент", "элемента", "элементов"];

//Поля сортировки
const SORT_REP_DATE = "DREP_DATE";
const SORT_REP_DATE_TO = "DREP_DATE_TO";

//Максимальное количество элементов
const MAX_TASKS = 10000;

//Стили
const STYLES = {
    PLANS_FINDER: { marginTop: "10px", marginLeft: "10px", width: "93%" },
    PLANS_CHECKBOX_HAVEDOCS: { alignContent: "space-around" },
    PLANS_LIST_CONTAINER: { height: "100%", display: "flex", flexDirection: "column", justifyContent: "space-between" },
    PLANS_LIST_ITEM_ZERODOCS: { backgroundColor: "#ebecec" },
    PLANS_LIST_ITEM_PRIMARY: { wordWrap: "break-word" },
    PLANS_LIST_ITEM_SECONDARY: { wordWrap: "break-word", fontSize: "0.6rem", textTransform: "uppercase" },
    PLANS_LIST_ITEM_PLAN: {
        backgroundColor: "#c7e7f1",
        "&:hover": { backgroundColor: `#c7e7f1`, filter: "brightness(0.92) !important" }
    },
    PLANS_LIST_ITEM_PLAN_FIELD: {
        marginLeft: "15px"
    },
    PLANS_LIST_FILTER_CONTAINER: { height: "calc(100% - 55px)", overflowY: "auto" },
    PLANS_LIST_BUTTONS_CONTAINER: { display: "flex", justifyContent: "space-around", paddingBottom: "10px", height: "45px" },
    PLANS_LIST_BUTTON: { minWidth: "125px", height: "35px" },
    PLANS_BUTTON: { position: "absolute", top: `calc(${APP_BAR_HEIGHT} + 16px)`, left: "16px" },
    PLANS_DRAWER: {
        width: "350px",
        display: "inline-block",
        flexShrink: 0,
        [`& .MuiDrawer-paper`]: { width: "350px", display: "inline-block", boxSizing: "border-box", ...APP_STYLES.SCROLL }
    },
    GANTT_CONTAINER: { height: `calc(100vh - ${APP_BAR_HEIGHT})`, width: "100vw", paddingTop: "24px" },
    GANTT_TITLE: { paddingLeft: "250px", paddingRight: "250px" },
    SECOND_TABLE: { paddingTop: "30px" },
    TASK_DIALOG_CARD_CONTAINER: { padding: "0px" },
    TASK_DIALOG_LIST_ITEM_ICON: { justifyContent: "center" },
    TASK_DIALOG_ICON: { fontSize: "2rem" },
    TASK_DIALOG_ACTION_CONTAINER: { border: 1, borderColor: "text.primary", borderRadius: "5px", width: "100%" },
    FILTERS: { display: "table", float: "right" },
    FILTERS_DATE: { display: "table-cell", verticalAlign: "middle" },
    FILTERS_LEVEL: { display: "table-cell", verticalAlign: "middle", paddingLeft: "15px" },
    FILTERS_LEVEL_CAPTION: { display: "flex", alignItems: "center" },
    FILTERS_LEVEL_LIMIT_ICON: { padding: "0px 8px", color: "#9f9c9c" },
    FILTERS_LIMIT_SELECT: nOutOfLimit => {
        return nOutOfLimit === 1
            ? {
                  ".MuiOutlinedInput-notchedOutline": {
                      borderColor: "#e9863c"
                  },
                  "&:hover .MuiOutlinedInput-notchedOutline": {
                      borderColor: "#e9863c",
                      borderWidth: "0.15rem"
                  },
                  "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
                      borderColor: "#e9863c",
                      borderWidth: "0.15rem"
                  }
              }
            : {};
    }
};

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

//Разбор XML с данными спецификации производственной программы
const parseProdPlanSpXML = async xmlDoc => {
    const data = await xml2JSON({
        xmlDoc,
        attributeValueProcessor: (name, val) =>
            ["numb", "title"].includes(name) ? undefined : ["start", "end"].includes(name) ? formatDateJSONDateOnly(val) : val
    });
    return data.XDATA.XGANTT;
};

//Форматирование для отображения количества документов
const formatCountDocs = (nCountDocs, nType = 0) => {
    //Склонение документов
    let DECLINATIONS = nType === 0 ? PLANS_DECLINATIONS : SPEC_DECLINATIONS;
    //Получаем последнюю цифру в значении
    let num = (nCountDocs % 100) % 10;
    //Документов
    if (nCountDocs > 10 && nCountDocs < 20) return `${nCountDocs} ${DECLINATIONS[2]}`;
    //Документа
    if (num > 1 && num < 5) return `${nCountDocs} ${DECLINATIONS[1]}`;
    //Документ
    if (num == 1) return `${nCountDocs} ${DECLINATIONS[0]}`;
    //Документов
    return `${nCountDocs} ${DECLINATIONS[2]}`;
};

//Изменение информации об отмеченных планах
const updateCtlgPlanInfo = (selectedPlans, plan) => {
    //Результат изменений
    let res = { selectedPlans: [...selectedPlans] || [], selectedPlansElements: plan.NCOUNT_DOCS };
    //Определяем наличие в отмеченных планах
    let selectedIndex = res.selectedPlans.indexOf(plan.NRN);
    //Если уже есть в отмеченных - удаляем, нет - добавляем
    if (selectedIndex > -1) {
        //Удаляем план из выбранных
        res.selectedPlans.splice(selectedIndex, 1);
        //Переворачиваем сумму документов
        res.selectedPlansElements = res.selectedPlansElements * -1;
    } else {
        //Добавляем план в выбранные
        res.selectedPlans.push(plan.NRN);
    }
    //Возвращаем результат
    return res;
};

//Список каталогов планов
const PlanCtlgsList = ({
    planCtlgs = [],
    selectedPlans = [],
    selectedPlanCtlg,
    selectedPlansElements,
    filter,
    setFilter,
    onCtlgClick,
    onCtlgPlanClick,
    onCtlgPlansOk,
    onCtlgPlansCancel
} = {}) => {
    //Генерация содержимого
    return (
        <Box sx={STYLES.PLANS_LIST_CONTAINER}>
            <Box sx={STYLES.PLANS_LIST_FILTER_CONTAINER}>
                <TextField
                    sx={STYLES.PLANS_FINDER}
                    name="planFilter"
                    label="Каталог"
                    value={filter.ctlgName}
                    variant="standard"
                    fullWidth
                    onChange={event => {
                        setFilter(pv => ({ ...pv, ctlgName: event.target.value }));
                    }}
                ></TextField>
                <FormGroup sx={STYLES.PLANS_CHECKBOX_HAVEDOCS}>
                    <FormControlLabel
                        control={
                            <Checkbox checked={filter.haveDocs} onChange={event => setFilter(pv => ({ ...pv, haveDocs: event.target.checked }))} />
                        }
                        label="Только с планами"
                        labelPlacement="end"
                    />
                </FormGroup>
                <List>
                    {planCtlgs.map(ctlg => (
                        <Box key={ctlg.NRN}>
                            <ListItemButton
                                sx={ctlg.NCOUNT_DOCS == 0 ? STYLES.PLANS_LIST_ITEM_ZERODOCS : null}
                                key={ctlg.NRN}
                                selected={ctlg.NRN === selectedPlanCtlg}
                                onClick={() => (onCtlgClick ? onCtlgClick(ctlg) : null)}
                                disabled={ctlg.NCOUNT_DOCS == 0}
                            >
                                <ListItemText
                                    primary={<Typography sx={STYLES.PLANS_LIST_ITEM_PRIMARY}>{ctlg.SNAME}</Typography>}
                                    secondary={<Typography sx={STYLES.PLANS_LIST_ITEM_SECONDARY}>{formatCountDocs(ctlg.NCOUNT_DOCS, 0)}</Typography>}
                                />
                            </ListItemButton>
                            {ctlg.NRN === selectedPlanCtlg && ctlg.XCRN_PLANS.length > 1
                                ? ctlg.XCRN_PLANS.map(plan => (
                                      <ListItemButton
                                          sx={plan.NCOUNT_DOCS == 0 ? STYLES.PLANS_LIST_ITEM_ZERODOCS : STYLES.PLANS_LIST_ITEM_PLAN}
                                          key={plan.NRN}
                                          disabled={plan.NCOUNT_DOCS == 0}
                                          onClick={() => (onCtlgPlanClick ? onCtlgPlanClick(plan) : null)}
                                      >
                                          <ListItemText
                                              sx={STYLES.PLANS_LIST_ITEM_PLAN_FIELD}
                                              primary={<Typography sx={STYLES.PLANS_LIST_ITEM_PRIMARY}>{plan.SNAME}</Typography>}
                                              secondary={
                                                  <Typography sx={STYLES.PLANS_LIST_ITEM_SECONDARY}>
                                                      {formatCountDocs(plan.NCOUNT_DOCS, 1)}
                                                  </Typography>
                                              }
                                          />
                                          {plan.NCOUNT_DOCS !== 0 ? <Checkbox checked={selectedPlans.includes(plan.NRN)} /> : null}
                                      </ListItemButton>
                                  ))
                                : null}
                        </Box>
                    ))}
                </List>
            </Box>
            <Box sx={STYLES.PLANS_LIST_BUTTONS_CONTAINER}>
                <Tooltip
                    title={
                        !selectedPlanCtlg
                            ? "Не выбран каталог планов"
                            : selectedPlans.length === 0
                              ? "Не выбраны планы каталога"
                              : selectedPlansElements > MAX_TASKS
                                ? `Выбранные планы превышают максимум элементов (выбрано: ${selectedPlansElements}, максимум: ${MAX_TASKS})`
                                : null
                    }
                >
                    <Box>
                        <Button
                            sx={STYLES.PLANS_LIST_BUTTON}
                            variant="contained"
                            disabled={selectedPlans.length === 0 || selectedPlansElements > MAX_TASKS}
                            onClick={onCtlgPlansOk}
                        >
                            Применить
                        </Button>
                    </Box>
                </Tooltip>
                <Button sx={STYLES.PLANS_LIST_BUTTON} variant="contained" onClick={onCtlgPlansCancel}>
                    Отмена
                </Button>
            </Box>
        </Box>
    );
};

//Контроль свойств - Список каталогов планов
PlanCtlgsList.propTypes = {
    planCtlgs: PropTypes.array,
    selectedPlans: PropTypes.array,
    selectedPlanCtlg: PropTypes.number,
    selectedPlansElements: PropTypes.number,
    onCtlgClick: PropTypes.func,
    onCtlgPlanClick: PropTypes.func,
    filter: PropTypes.object,
    setFilter: PropTypes.func,
    onCtlgPlansOk: PropTypes.func,
    onCtlgPlansCancel: PropTypes.func
};

//Генерация диалога задачи
const taskDialogRenderer = ({ task, taskColors, close, handleTaskDetailOpen }) => {
    //Стиль и описание для легенды
    const legendDesc = taskLegendDesc({ task, taskColors });
    //Элемент карточки задачи
    const cardItem = ({ listItemsStyle = {}, icon, primaryText = null, secondaryText = null }) => (
        <ListItem disablePadding sx={listItemsStyle}>
            <ListItemButton>
                <ListItemIcon sx={STYLES.TASK_DIALOG_LIST_ITEM_ICON}>
                    <Icon sx={STYLES.TASK_DIALOG_ICON}>{icon}</Icon>
                </ListItemIcon>
                <ListItemText primary={primaryText} secondary={secondaryText} />
            </ListItemButton>
        </ListItem>
    );
    //Собираем содержимое диалога
    return (
        <Card>
            <CardHeader
                title={task.name}
                titleTypographyProps={{ variant: "h6" }}
                subheader={`${formatDateRF(task.start)} - ${formatDateRF(task.end)}`}
                action={
                    <IconButton aria-label="Закрыть" onClick={close}>
                        <Icon>close</Icon>
                    </IconButton>
                }
            />
            <CardContent sx={STYLES.TASK_DIALOG_CARD_CONTAINER}>
                <List>
                    {cardItem({ icon: "fast_forward", primaryText: `${task.start_fact} ${task.meas}`, secondaryText: "Запущено" })}
                    {cardItem({ icon: "assessment", primaryText: `${task.main_quant} ${task.meas}`, secondaryText: "Количество план" })}
                    {cardItem({ icon: "verified", primaryText: `${task.rel_fact} ${task.meas}`, secondaryText: "Количество сдано" })}
                    {cardItem({ icon: "date_range", primaryText: task.rep_date_to, secondaryText: "Дата выпуска план" })}
                    {legendDesc ? cardItem({ listItemsStyle: legendDesc.style, icon: "palette", secondaryText: legendDesc.text }) : null}
                </List>
            </CardContent>
            <CardActions disableSpacing>
                <Box p={2} display="flex" justifyContent="center" sx={STYLES.TASK_DIALOG_ACTION_CONTAINER}>
                    {hasValue(task.type) ? (
                        <Button size="large" variant="contained" color="primary" onClick={() => handleTaskDetailOpen(task.rn, task.type)}>
                            {task["detail_list"]}
                        </Button>
                    ) : (
                        <Typography color="textSecondary">{`Анализ отклонений недоступен${
                            task["detail_list"] ? `: ${task["detail_list"]}` : ""
                        }`}</Typography>
                    )}
                </Box>
            </CardActions>
        </Card>
    );
};

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

//Корневая панель производственной программы
const MechRecCostProdPlans = () => {
    //Собственное состояние
    let [state, setState] = useState({
        init: false,
        showPlanList: false,
        planCtlgs: [],
        planCtlgsLoaded: false,
        selectedPlans: [],
        selectedPlansElements: 0,
        selectedPlanCtlgSpecsLoaded: false,
        selectedPlanCtlg: null,
        selectedPlanCtlgMaxLevel: null,
        selectedPlanCtlgLevel: null,
        selectedPlanCtlgOutOfLimit: 0,
        selectedPlanCtlgSort: null,
        selectedPlanCtlgMenuItems: null,
        loadedCtlg: null,
        loadedPlans: [],
        loadedElements: 0,
        gantt: {},
        selectedTaskDetail: null,
        selectedTaskDetailType: null,
        planSpec: null
    });
    //Состояние для фильтра каталогов
    const [filter, setFilter] = useState({ ctlgName: "", haveDocs: false });

    //Массив отфильтрованных каталогов
    const filteredPlanCtgls = useFilteredPlanCtlgs(state.planCtlgs, filter);

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

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

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

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

    //Инициализация каталогов планов
    const initPlanCtlgs = useCallback(async () => {
        if (!state.init) {
            const data = await executeStored({
                stored: "PKG_P8PANELS_MECHREC.FCPRODPLAN_PP_CTLG_INIT",
                args: {},
                respArg: "COUT",
                isArray: name => ["XFCPRODPLAN_CRNS", "XCRN_PLANS"].includes(name)
            });
            setState(pv => ({ ...pv, init: true, planCtlgs: [...(data?.XFCPRODPLAN_CRNS || [])], planCtlgsLoaded: true }));
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [state.init, executeStored]);

    //Загрузка списка спецификаций каталога планов
    const loadPlanCtglSpecs = useCallback(
        async (level = null, sort = null) => {
            const data = await executeStored({
                stored: "PKG_P8PANELS_MECHREC.FCPRODPLANSP_GET",
                args: {
                    NCRN: state.selectedPlanCtlg,
                    CFCPRODPLANS: {
                        VALUE: state.selectedPlans.length > 0 ? state.selectedPlans.join(";") : null,
                        SDATA_TYPE: SERV_DATA_TYPE_CLOB
                    },
                    NLEVEL: level,
                    SSORT_FIELD: sort,
                    NFCPRODPLANSP: state.planSpec
                }
            });
            let doc = await parseProdPlanSpXML(data.COUT);
            setState(pv => ({
                ...pv,
                selectedPlanCtlgMaxLevel: data.NMAX_LEVEL,
                selectedPlanCtlgLevel: level || level === 0 ? level : data.NMAX_LEVEL,
                selectedPlanCtlgOutOfLimit: data.NOUT_OF_LIMIT,
                selectedPlanCtlgSort: sort,
                selectedPlanCtlgMenuItems: [...Array(data.NMAX_LEVEL).keys()].map(el => el + 1),
                selectedPlanCtlgSpecsLoaded: true,
                gantt: { ...doc, tasks: [...(doc?.tasks || [])] },
                loadedCtlg: state.selectedPlanCtlg,
                loadedPlans: [...state.selectedPlans],
                loadedElements: state.selectedPlansElements,
                showPlanList: false
            }));
        },
        // eslint-disable-next-line react-hooks/exhaustive-deps
        [executeStored, state.selectedPlanCtlg, state.selectedPlans, state.planSpec]
    );

    //Обработка нажатия на элемент в списке каталогов планов
    const handleCtlgClick = project => {
        //Если этот каталог не был выбран
        if (state.selectedPlanCtlg != project.NRN) {
            //Если выбран уже загруженный - укажем информацию о том, как он загружен
            if (project.NRN === state.loadedCtlg) {
                setState(pv => ({
                    ...pv,
                    selectedPlanCtlg: project.NRN,
                    selectedPlans: [...pv.loadedPlans],
                    selectedPlansElements: pv.loadedElements
                }));
            } else {
                setState(pv => ({
                    ...pv,
                    selectedPlanCtlg: project.NRN,
                    selectedPlans: project.XCRN_PLANS.length === 1 ? [project.XCRN_PLANS[0].NRN] : [],
                    selectedPlansElements: 0
                }));
            }
        } else {
            setState(pv => ({ ...pv, selectedPlanCtlg: null, selectedPlans: [], selectedPlansElements: 0 }));
        }
    };

    //Обработка нажатия на элемент в списке планов каталога
    const handleCtlgPlanClick = plan => {
        //Считываем обновленную информацию об отмеченных планах
        let newPlansInfo = updateCtlgPlanInfo(state.selectedPlans, plan);
        //Обновляем список отмеченных планов
        setState(pv => ({
            ...pv,
            selectedPlans: [...newPlansInfo.selectedPlans],
            selectedPlansElements: pv.selectedPlansElements + newPlansInfo.selectedPlansElements
        }));
    };

    //Обработка нажатия "ОК" при отборе планов
    const handleSelectedPlansOk = () => {
        //Загружаем диаграмму
        loadPlanCtglSpecs(null, SORT_REP_DATE_TO);
    };

    //Обработка нажатия "Отмена" при отборе планов
    const handleSelectedPlansCancel = () => {
        setState(pv => ({
            ...pv,
            selectedPlanCtlg: pv.loadedCtlg,
            selectedPlans: [...pv.loadedPlans] || [],
            selectedPlansElements: pv.loadedElements,
            showPlanList: false
        }));
    };

    //При подключении компонента к странице
    useEffect(() => {
        const actionPrms = getNavigationSearch();
        if (actionPrms.NSPRN) setState(pv => ({ ...pv, planSpec: parseInt(actionPrms.NSPRN), init: true }));
        else initPlanCtlgs();
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);

    //При смене выбранного каталога плана или при явном указании позиции спецификации плана
    useEffect(() => {
        if (state.planSpec) loadPlanCtglSpecs(null, SORT_REP_DATE_TO);
    }, [state.planSpec, loadPlanCtglSpecs]);

    //Выбор уровня
    const handleChangeSelectLevel = selectedLevel => {
        loadPlanCtglSpecs(selectedLevel, state.selectedPlanCtlgSort);
        setState(pv => ({ ...pv, selectedPlanCtlgLevel: selectedLevel }));
    };

    //Выбор сортировки
    const handleChangeSelectSort = selectedSort => {
        loadPlanCtglSpecs(state.selectedPlanCtlgLevel, selectedSort);
        setState(pv => ({ ...pv, selectedPlanCtlgSort: selectedSort }));
    };

    //При закрытии окна детализации
    const handleTaskDetailClose = () => {
        setState(pv => ({ ...pv, selectedTaskDetail: null, selectedTaskDetailType: null }));
    };

    //При открытии окна детализации
    const handleTaskDetailOpen = (taskRn, taskType) => {
        setState(pv => ({ ...pv, selectedTaskDetail: taskRn, selectedTaskDetailType: taskType }));
    };

    //При открытии окна информации об ограничении уровня
    const handleLevelLimitInfoOpen = () => {
        //Отображаем информацию
        showMsgInfo(
            `Размер производственной программы превышает предельно допустимый для одновременного отображения в виде диаграммы Ганта. 
             Доступные для просмотра уровни вложенности ограничены. 
             Вы можете просматривать производственную программу частями, используя действие "Открытие панели Производственная программа" в спецификации "Выпуск" 
             раздела "Планы и отчеты производства изделий".`
        );
    };

    //Генерация содержимого
    return (
        <Box>
            {!state.planSpec ? (
                <>
                    <Fab variant="extended" sx={STYLES.PLANS_BUTTON} onClick={() => setState(pv => ({ ...pv, showPlanList: !pv.showPlanList }))}>
                        Каталоги планов
                    </Fab>
                    <Drawer anchor={"left"} open={state.showPlanList} onClose={handleSelectedPlansCancel} sx={STYLES.PLANS_DRAWER}>
                        <PlanCtlgsList
                            planCtlgs={filteredPlanCtgls}
                            selectedPlans={state.selectedPlans}
                            selectedPlanCtlg={state.selectedPlanCtlg}
                            selectedPlansElements={state.selectedPlansElements}
                            filter={filter}
                            setFilter={setFilter}
                            onCtlgClick={handleCtlgClick}
                            onCtlgPlanClick={handleCtlgPlanClick}
                            onCtlgPlansOk={handleSelectedPlansOk}
                            onCtlgPlansCancel={handleSelectedPlansCancel}
                        />
                    </Drawer>
                </>
            ) : null}
            {state.init == true ? (
                <Grid container>
                    <Grid item xs={12}>
                        {state.selectedPlanCtlgSpecsLoaded ? (
                            state.gantt.tasks.length === 0 ? (
                                <Box pt={3}>
                                    <InlineMsgInfo
                                        okBtn={false}
                                        text={
                                            state.planSpec
                                                ? "Не найдено данных для выбранной позиции плана"
                                                : "В каталоге планов отсутствуют записи спецификации"
                                        }
                                    />
                                </Box>
                            ) : (
                                <Box>
                                    {state.selectedPlanCtlgMaxLevel ? (
                                        <Box sx={STYLES.FILTERS} p={1}>
                                            <Box sx={STYLES.FILTERS_DATE}>
                                                <InputLabel id="select-label-sort">Сортировка</InputLabel>
                                                <Select
                                                    labelId="select-label-sort"
                                                    id="select-sort"
                                                    value={state.selectedPlanCtlgSort}
                                                    label="Сортировка"
                                                    onChange={event => {
                                                        handleChangeSelectSort(event.target.value);
                                                    }}
                                                    defaultValue={state.selectedPlanCtlgLevel}
                                                >
                                                    <MenuItem value={SORT_REP_DATE_TO} key="1">
                                                        Дата выпуска
                                                    </MenuItem>
                                                    <MenuItem value={SORT_REP_DATE} key="2">
                                                        Дата запуска
                                                    </MenuItem>
                                                </Select>
                                            </Box>
                                            <Box sx={STYLES.FILTERS_LEVEL}>
                                                <Box sx={STYLES.FILTERS_LEVEL_CAPTION}>
                                                    <InputLabel id="select-label-level">До уровня</InputLabel>
                                                    {state.selectedPlanCtlgOutOfLimit === 1 ? (
                                                        <IconButton sx={STYLES.FILTERS_LEVEL_LIMIT_ICON} onClick={handleLevelLimitInfoOpen}>
                                                            <Icon>info</Icon>
                                                        </IconButton>
                                                    ) : null}
                                                </Box>
                                                <Select
                                                    sx={STYLES.FILTERS_LIMIT_SELECT(state.selectedPlanCtlgOutOfLimit)}
                                                    labelId="select-label-level"
                                                    id="select-level"
                                                    value={state.selectedPlanCtlgLevel}
                                                    label="Уровень"
                                                    onChange={event => {
                                                        handleChangeSelectLevel(event.target.value);
                                                    }}
                                                    defaultValue={state.selectedPlanCtlgLevel}
                                                >
                                                    {state.selectedPlanCtlgMenuItems.map(el => (
                                                        <MenuItem value={el} key={el}>
                                                            {el}
                                                        </MenuItem>
                                                    ))}
                                                </Select>
                                            </Box>
                                        </Box>
                                    ) : null}
                                    <P8PGantt
                                        {...P8P_GANTT_CONFIG_PROPS}
                                        {...state.gantt}
                                        containerStyle={STYLES.GANTT_CONTAINER}
                                        titleStyle={STYLES.GANTT_TITLE}
                                        taskDialogRenderer={prms => taskDialogRenderer({ ...prms, handleTaskDetailOpen })}
                                    />
                                </Box>
                            )
                        ) : !state.loadedCtlg ? (
                            <Box pt={3}>
                                <InlineMsgInfo
                                    okBtn={false}
                                    text={
                                        state.planSpec
                                            ? "Загружаю график для выбранной позиции плана..."
                                            : "Укажите каталог планов или планы для отображения их спецификаций"
                                    }
                                />
                            </Box>
                        ) : null}
                    </Grid>
                </Grid>
            ) : null}
            {state.selectedTaskDetail ? (
                <Dialog open onClose={handleTaskDetailClose} fullWidth maxWidth="xl">
                    <DialogContent>
                        {/* Если тип таска 0, 1 или 4 - основная таблица "Маршрутные листы" */}
                        {[0, 1, 4].includes(state.selectedTaskDetailType) ? (
                            <CostRouteListsDataGrid task={state.selectedTaskDetail} taskType={state.selectedTaskDetailType} />
                        ) : (
                            <Box>
                                {/* Если тип таска 2 или 3 - основная таблица "Приходы из подразделений" */}
                                <IncomFromDepsDataGrid task={state.selectedTaskDetail} taskType={state.selectedTaskDetailType} />
                                {/* Если тип 3 - необходимо добавить отдельную таблицу "Маршрутные листы" */}
                                {state.selectedTaskDetailType === 3 ? (
                                    <Box sx={STYLES.SECOND_TABLE}>
                                        <CostRouteListsDataGrid task={state.selectedTaskDetail} taskType={state.selectedTaskDetailType} />
                                    </Box>
                                ) : null}
                            </Box>
                        )}
                    </DialogContent>
                    <DialogActions>
                        <Button onClick={handleTaskDetailClose}>Закрыть</Button>
                    </DialogActions>
                </Dialog>
            ) : null}
        </Box>
    );
};

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

export { MechRecCostProdPlans };
