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

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

import React, { useState, useEffect } from "react"; //Классы React
import { Box, Tab, Tabs, IconButton, Icon, Stack } from "@mui/material"; //Интерфейсные компоненты
import { IUDFormDialog } from "./IUD/iud_form_dialog"; //Диалог добавления/исправления/удаления компонентов настройки регламентированного отчёта
import { useWindowResize, useTab, useConf, useRecOpen, useFormDialog, a11yProps } from "./hooks"; //Пользовательские хуки
import { SectionTab } from "./components/rrp_section"; //Компонент раздела настройки

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

//Высота меню Парус (пиксели)
const pxOuterMenuH = 53;
//Высота заголовка панели (пиксели)
const pxPanelHeaderH = 64;
//Ширина кнопки добавления раздела (пиксели)
const pxSectionAddButtonW = 40;

//Стили
const STYLES = {
    CONTAINER: { width: "100%", minHeight: `calc(100vh - ${pxPanelHeaderH})`, maxHeight: `calc(100vh - ${pxPanelHeaderH})` },
    PANELS_MAIN_COLOR: { backgroundColor: "#1976d2" },
    ICON_WHITE: { color: "white" },
    TABS_BOTTOM_LINE: { borderBottom: 1, borderColor: "divider" },
    TABS_PADDING: { padding: "5px" },
    TABS_SIZES: (width, pxSectionAddButtonW) => ({ maxHeight: 150, maxWidth: width - pxSectionAddButtonW }),
    SECTION_ACTIONS: { display: "flex", justifyContent: "center", alignItems: "center" }
};

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

//Редактор настройки регламентированного отчёта
const RrpConfEditor = () => {
    //Состояние вкладки
    const [tabValue, handleSectionChange] = useTab("");

    //Состояние настройки
    const [rrpConf, handleReload] = useConf(tabValue, handleSectionChange);

    //Функции открытия разделов
    const [handleMarkOpen, handleMarkCnOpen, handleMarkCnInsert] = useRecOpen(handleReload);

    //Состояние форм диалога
    const [
        formOpen,
        formData,
        handleSectionAdd,
        handleSectionEdit,
        handleSectionDelete,
        handleMarkAdd,
        handleMarkEdit,
        handleMarkDelete,
        handleDialogClose
    ] = useFormDialog();

    //Состояние ширины и высоты рабочей области окна
    const [width, height] = useWindowResize();

    //Состояние высоты вкладок с разделами
    const [pxTabsH, setPxTabsH] = useState(0);

    //При рендере данных
    useEffect(() => {
        rrpConf.docLoaded ? setPxTabsH(document.getElementById("sectionTabs").offsetHeight) : null;
    }, [rrpConf.docLoaded]);

    //Формируем меню показателей
    const markMenuItems = [
        { method: "EDIT", name: "Исправить", icon: "edit", func: handleMarkEdit },
        { method: "DELETE", name: "Удалить", icon: "delete", func: handleMarkDelete }
    ];

    //Генерация содержимого
    return (
        <Box sx={STYLES.CONTAINER}>
            {formOpen ? <IUDFormDialog initial={formData} onClose={handleDialogClose} onReload={handleReload} /> : null}
            {rrpConf.docLoaded ? (
                <Box>
                    <Stack direction="row" sx={STYLES.TABS_BOTTOM_LINE}>
                        <Tabs
                            id="sectionTabs"
                            value={tabValue}
                            onChange={(event, newValue) => handleSectionChange(newValue)}
                            variant="scrollable"
                            scrollButtons={false}
                            visibleScrollbar
                            aria-label="section tab"
                            sx={STYLES.TABS_SIZES(width, pxSectionAddButtonW)}
                        >
                            {rrpConf.sections.map((s, i) => {
                                return (
                                    <Tab
                                        key={s.rn}
                                        {...a11yProps(i)}
                                        sx={STYLES.TABS_PADDING}
                                        label={
                                            <Box sx={STYLES.SECTION_ACTIONS}>
                                                {s.name}
                                                <IconButton component="span" onClick={() => handleSectionEdit(s.rn, s.code, s.name)}>
                                                    <Icon>edit</Icon>
                                                </IconButton>
                                                <IconButton
                                                    disabled={s.delete_allow === 0}
                                                    component="span"
                                                    onClick={() => handleSectionDelete(s.rn, s.code, s.name)}
                                                >
                                                    <Icon>delete</Icon>
                                                </IconButton>
                                            </Box>
                                        }
                                        wrapped
                                    />
                                );
                            })}
                        </Tabs>
                        <Box display="flex" justifyContent="center" alignItems="center" sx={STYLES.PANELS_MAIN_COLOR}>
                            <IconButton onClick={handleSectionAdd}>
                                <Icon sx={STYLES.ICON_WHITE}>add</Icon>
                            </IconButton>
                        </Box>
                    </Stack>
                    {rrpConf.sections.map((s, i) => {
                        return (
                            <SectionTab
                                key={s.rn}
                                section={s}
                                tabValue={tabValue}
                                index={i}
                                containerProps={{ height, pxOuterMenuH, pxPanelHeaderH, pxTabsH }}
                                handleReload={handleReload}
                                handleMarkOpen={handleMarkOpen}
                                handleMarkAdd={handleMarkAdd}
                                handleMarkCnOpen={handleMarkCnOpen}
                                handleMarkCnInsert={handleMarkCnInsert}
                                menuItems={markMenuItems}
                            />
                        );
                    })}
                </Box>
            ) : null}
        </Box>
    );
};

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

export { RrpConfEditor };
