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

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

import React, { useState } from "react"; //Классы React
import PropTypes from "prop-types"; //Контроль свойств компонента
import {
    Box,
    IconButton,
    Icon,
    Dialog,
    DialogTitle,
    DialogContent,
    Button,
    Typography,
    List,
    ListItem,
    Select,
    FormControl,
    InputLabel,
    MenuItem,
    DialogActions
} from "@mui/material"; //Интерфейсные элементы
import { P8PDataGrid, P8P_DATA_GRID_SIZE } from "../../../components/p8p_data_grid"; //Таблица данных
import { P8P_DATA_GRID_CONFIG_PROPS } from "../../../config_wrapper"; //Подключение компонентов к настройкам приложения
import { SectionTabPanel } from "./section_tab_panel"; //Компонент вкладки раздела
import { confSctnMrkCellRender, confSctnMrkHeadCellRender } from "./layouts"; //Дополнительная разметка и вёрстка клиентских элементов

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

//Стили
const STYLES = {
    GRID_SIZES: (height, pxOuterMenuH, pxPanelHeaderH, pxTabsH) => ({
        padding: 0,
        minWidth: "98vw",
        minHeight: (height - pxOuterMenuH - pxPanelHeaderH - pxTabsH) * 0.93,
        maxWidth: "98vw",
        maxHeight: (height - pxOuterMenuH - pxPanelHeaderH - pxTabsH) * 0.93
    }),
    TABLE_CONTAINER: {
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        paddingTop: 1,
        paddingBottom: 1
    },
    SECTION_ACTIONS: { display: "flex", justifyContent: "space-between", padding: "0px 5px" },
    TABLE_SCROLL: {
        "&::-webkit-scrollbar": {
            width: "12px",
            height: "12px"
        },
        "&::-webkit-scrollbar-track": {
            borderRadius: "88px",
            backgroundColor: "#EBEBEB"
        },
        "&::-webkit-scrollbar-thumb": {
            borderRadius: "88px",
            backgroundColor: "#b4b4b4",
            backgroundClip: "padding-box",
            border: "3px solid #EBEBEB"
        },
        "&::-webkit-scrollbar-thumb:hover": {
            backgroundColor: "#808080"
        }
    },
    HELP_LIST_ITEM: {
        padding: "0px 0px 0px 5px",
        whiteSpace: "pre",
        fontSize: "0.95rem"
    },
    HELP_LIST_ITEM_NAME: {
        fontWeight: "bold",
        fontSize: "inherit",
        minWidth: "45px"
    },
    HELP_LIST_ITEM_DESC: {
        fontSize: "inherit"
    },
    DIALOG_ACTIONS: { justifyContent: "end", paddingRight: "24px", paddingLeft: "24px" }
};

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

//Элемент списка расшифровки состава
const HelpListItem = ({ name, desc }) => {
    return (
        <ListItem sx={STYLES.HELP_LIST_ITEM}>
            <Typography sx={STYLES.HELP_LIST_ITEM_NAME}>{name}</Typography>
            <Typography sx={STYLES.HELP_LIST_ITEM_DESC}>{` - ${desc}`}</Typography>
        </ListItem>
    );
};

//Контроль свойств - Элемент списка расшифровки состава
HelpListItem.propTypes = {
    name: PropTypes.string.isRequired,
    desc: PropTypes.string.isRequired
};

//Диалог дополнительной информации
const HelpDialog = ({ handleOpenHelpChange }) => {
    //Генерация содержимого
    return (
        <Dialog open onClose={handleOpenHelpChange}>
            <DialogTitle>
                <Box display="flex" alignItems="center">
                    <Box flexGrow={1} textAlign="center">
                        Информация
                    </Box>
                    <Box>
                        <IconButton aria-label="close" onClick={handleOpenHelpChange}>
                            <Icon>close</Icon>
                        </IconButton>
                    </Box>
                </Box>
            </DialogTitle>
            <DialogContent>
                <Typography>Карточки показателей содержат сокращенную информацию о типе состава показателя.</Typography>
                <Typography>Список сокращений:</Typography>
                <List disablePadding={true}>
                    <HelpListItem name="fx" desc="формула" />
                    <HelpListItem name="СЗ" desc="статическое значение" />
                    <HelpListItem name="ХП" desc="хранимая процедура" />
                    <HelpListItem name="РП" desc="расчетный показатель" />
                    <HelpListItem name="ХО" desc="хозяйственные операции" />
                    <HelpListItem name="РСДК" desc="расчёты с дебиторами/кредиторами" />
                    <HelpListItem name="ОС" desc="остатки средств по счетам" />
                    <HelpListItem name="ТМЦ" desc="остатки товарно-материальных ценностей" />
                    <HelpListItem name="ДКЗ" desc="дебиторская/кредиторская задолженность" />
                    <HelpListItem name="ИК" desc="инвентарная картотека" />
                    <HelpListItem name="МБП" desc="картотека МБП" />
                    <HelpListItem name="КОБП" desc="картотека операций будущих периодов" />
                    <HelpListItem name="ДПНП" desc="декларация по налогу на прибыль" />
                    <HelpListItem name="РО" desc="регламентированный отчет" />
                </List>
            </DialogContent>
        </Dialog>
    );
};

//Контроль свойств - Диалог дополнительной информации
HelpDialog.propTypes = {
    handleOpenHelpChange: PropTypes.func.isRequired
};

//Диалог сортировки
const SortDialog = ({ init, handleOpenSortChange, onOrderChange }) => {
    //Собственное состояние сортировки
    const [order, setOrder] = useState({ row: init.rowOrder ? init.rowOrder : 0, column: init.columnOrder ? init.columnOrder : 0 });

    //Изменеие сортировки
    const handleOrderChange = e => setOrder(pv => ({ ...pv, [e.target.name]: e.target.value }));

    //Нажатие на кнопку Ok
    const handleOk = () => {
        onOrderChange({ rowOrder: order.row, columnOrder: order.column });
        handleOpenSortChange();
    };

    //Кнопка "Очистить", значения по умолчанию
    const handleClear = () => {
        setOrder({ row: 0, column: 0 });
    };

    //Кнопка "Отмена"
    const handleCancel = () => {
        handleOpenSortChange();
    };

    //Генерация содержимого
    return (
        <Dialog open onClose={handleOpenSortChange}>
            <DialogTitle>
                <Box display="flex" alignItems="center">
                    <Box flexGrow={1} textAlign="center">
                        Сортировка
                    </Box>
                    <Box>
                        <IconButton aria-label="close" onClick={handleCancel}>
                            <Icon>close</Icon>
                        </IconButton>
                    </Box>
                </Box>
            </DialogTitle>
            <DialogContent>
                <Box component="section" p={1}>
                    <FormControl variant="standard" fullWidth>
                        <InputLabel id="row-label">Строки</InputLabel>
                        <Select labelId="row-label" id="row" name="row" value={order.row} label="Строки" onChange={handleOrderChange}>
                            <MenuItem value={0}>Номер</MenuItem>
                            <MenuItem value={1}>Код</MenuItem>
                            <MenuItem value={2}>Мнемокод</MenuItem>
                        </Select>
                    </FormControl>
                </Box>
                <Box component="section" p={1}>
                    <FormControl variant="standard" fullWidth>
                        <InputLabel id="column-label">Графы</InputLabel>
                        <Select labelId="column-label" id="column" name="column" value={order.column} label="Графы" onChange={handleOrderChange}>
                            <MenuItem value={0}>Номер</MenuItem>
                            <MenuItem value={1}>Код</MenuItem>
                            <MenuItem value={2}>Мнемокод</MenuItem>
                        </Select>
                    </FormControl>
                </Box>
            </DialogContent>
            <DialogActions sx={STYLES.DIALOG_ACTIONS}>
                <Button variant="text" onClick={handleOk}>
                    ОК
                </Button>
                <Button variant="text" onClick={handleClear}>
                    Очистить
                </Button>
                <Button variant="text" onClick={handleCancel}>
                    Отмена
                </Button>
            </DialogActions>
        </Dialog>
    );
};

//Контроль свойств - Диалог сортировки
SortDialog.propTypes = {
    init: PropTypes.object.isRequired,
    handleOpenSortChange: PropTypes.func.isRequired,
    onOrderChange: PropTypes.func.isRequired
};

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

//Раздел настройки
const SectionTab = ({
    section,
    tabValue,
    index,
    order,
    onOrderChange,
    containerProps,
    handleMarkAdd,
    handleReload,
    handleMarkOpen,
    handleMarkCnOpen,
    handleMarkCnInsert,
    menuItems
}) => {
    //Состояние - диалог информации
    const [openHelp, setOpenHelp] = useState(false);

    //Изменение состояния диалога информации
    const handleOpenHelpChange = () => {
        setOpenHelp(!openHelp);
    };

    //Состояние - диалог сортировки
    const [openSort, setOpenSort] = useState(false);

    //Изменение состояния диалога сортировки
    const handleOpenSortChange = () => {
        setOpenSort(!openSort);
    };

    //Генерация содержимого
    return (
        <>
            <SectionTabPanel key={section.rn} value={tabValue} index={index}>
                <Box sx={STYLES.SECTION_ACTIONS}>
                    <Box>
                        <IconButton onClick={() => handleMarkAdd(section.rn)}>
                            <Icon>add</Icon>
                        </IconButton>
                        <IconButton onClick={() => handleReload()}>
                            <Icon>refresh</Icon>
                        </IconButton>
                    </Box>
                    <Box>
                        <IconButton onClick={() => handleOpenSortChange()}>
                            <Icon>sort</Icon>
                        </IconButton>
                        <IconButton onClick={() => handleOpenHelpChange()}>
                            <Icon>help</Icon>
                        </IconButton>
                    </Box>
                </Box>
                {section.dataLoaded && section.columnsDef.length > 3 ? (
                    <Box sx={STYLES.TABLE_CONTAINER}>
                        <P8PDataGrid
                            {...P8P_DATA_GRID_CONFIG_PROPS}
                            containerComponentProps={{
                                elevation: 6,
                                sx: { ...STYLES.TABLE_SCROLL },
                                style: STYLES.GRID_SIZES(
                                    containerProps.height,
                                    containerProps.pxOuterMenuH,
                                    containerProps.pxPanelHeaderH,
                                    containerProps.pxTabsH
                                )
                            }}
                            columnsDef={section.columnsDef}
                            groups={section.groups}
                            rows={section.rows}
                            fixedHeader={section.fixedHeader}
                            fixedColumns={section.fixedColumns}
                            size={P8P_DATA_GRID_SIZE.LARGE}
                            reloading={section.reload}
                            dataCellRender={prms =>
                                confSctnMrkCellRender({
                                    ...prms,
                                    sectionRn: section.rn,
                                    handleMarkAdd: handleMarkAdd,
                                    handleMarkOpen: handleMarkOpen,
                                    handleMarkCnOpen: handleMarkCnOpen,
                                    handleMarkCnInsert: handleMarkCnInsert,
                                    menuItems: menuItems
                                })
                            }
                            headCellRender={confSctnMrkHeadCellRender}
                        />
                    </Box>
                ) : null}
            </SectionTabPanel>
            {openSort ? <SortDialog init={order} handleOpenSortChange={handleOpenSortChange} onOrderChange={onOrderChange} /> : null}
            {openHelp ? <HelpDialog handleOpenHelpChange={handleOpenHelpChange} /> : null}
        </>
    );
};

//Контроль свойств - Раздел настройки
SectionTab.propTypes = {
    section: PropTypes.object.isRequired,
    tabValue: PropTypes.number,
    index: PropTypes.number,
    order: PropTypes.object.isRequired,
    onOrderChange: PropTypes.func.isRequired,
    containerProps: PropTypes.object,
    handleMarkAdd: PropTypes.func,
    handleReload: PropTypes.func,
    handleMarkOpen: PropTypes.func,
    handleMarkCnOpen: PropTypes.func,
    handleMarkCnInsert: PropTypes.func,
    menuItems: PropTypes.array
};

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

export { SectionTab };