/*
    Парус 8 - Панели мониторинга - УДП - Доски задач
    Компонент: Фильтр отбора
*/

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

import React, { useState } from "react"; //Классы React
import PropTypes from "prop-types"; //Контроль свойств компонента
import { Chip, Stack, Icon, IconButton, Box, Menu, MenuItem, Typography } from "@mui/material"; //Интерфейсные компоненты
import { FilterDialog } from "./components/filter_dialog.js"; //Диалог фильтра
import { COMMON_STYLES } from "./styles"; //Общие стили

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

//Стили
const STYLES = {
    ICON_ORDERS: orders => {
        return orders.length > 0 ? { color: "#1976d2" } : {};
    },
    MENU_ORDER: {
        width: "260px"
    },
    MENU_ITEM_ORDER: {
        display: "flex",
        justifyContent: "space-between"
    },
    FILTERS_STACK: {
        paddingBottom: "5px",
        ...COMMON_STYLES.SCROLL
    },
    STACK_FILTER: { maxWidth: "99vw" }
};

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

//Элемент меню сортировок
const SortMenuItem = ({ item, caption, orders, onOrderChanged }) => {
    //Кнопка сортировки
    const order = orders.find(order => order.name == item);
    //Генерация содержимого
    return (
        <MenuItem sx={STYLES.MENU_ITEM_ORDER} key={item} onClick={() => onOrderChanged(item)}>
            <Typography>{caption}</Typography>
            {order ? order.direction === "ASC" ? <Icon>arrow_upward</Icon> : <Icon>arrow_downward</Icon> : null}
        </MenuItem>
    );
};

//Контроль свойств компонента - Элемент меню сортировок
SortMenuItem.propTypes = {
    item: PropTypes.string.isRequired,
    caption: PropTypes.string.isRequired,
    orders: PropTypes.array,
    onOrderChanged: PropTypes.func.isRequired
};

//Меню сортировок
const SortMenu = ({ menuOrders, onOrdersMenuClose, orders, onOrderChanged }) => {
    //Генерация содержимого
    return (
        <Menu
            id={`sort_menu`}
            anchorEl={menuOrders.anchorMenuOrders}
            open={menuOrders.openOrders}
            onClose={onOrdersMenuClose}
            MenuListProps={{ sx: STYLES.MENU_ORDER }}
        >
            <SortMenuItem item={"DCHANGE_DATE"} caption={"Дата последнего изменения"} orders={orders} onOrderChanged={onOrderChanged} />
            <SortMenuItem item={"DPLAN_DATE"} caption={"Дата начала работ"} orders={orders} onOrderChanged={onOrderChanged} />
            <SortMenuItem item={"SPREF_NUMB"} caption={"Номер"} orders={orders} onOrderChanged={onOrderChanged} />
        </Menu>
    );
};

//Контроль свойств компонента - Меню сортировок
SortMenu.propTypes = {
    menuOrders: PropTypes.object.isRequired,
    onOrdersMenuClose: PropTypes.func.isRequired,
    orders: PropTypes.array,
    onOrderChanged: PropTypes.func.isRequired
};

//Элемент фильтра
const FilterItem = ({ caption, value, onClick }) => {
    //При нажатии на элемент
    const handleClick = () => (onClick ? onClick() : null);

    //Генерация содержимого
    return (
        <Chip
            label={
                <Stack direction={"row"} alignItems={"center"}>
                    <strong>{caption}</strong>
                    {value ? `:\u00A0${value}` : null}
                </Stack>
            }
            variant="outlined"
            onClick={handleClick}
        />
    );
};

//Контроль свойств компонента - Элемент фильтра
FilterItem.propTypes = {
    caption: PropTypes.string.isRequired,
    value: PropTypes.any,
    onClick: PropTypes.func
};

//---------------
//Тело компонента
//---------------

//Фильтр отбора
const Filter = ({
    isFilterDialogOpen,
    filter,
    docLinks,
    selectedDocLink,
    onFilterChange,
    onDocLinksLoad,
    onFilterOpen,
    onFilterClose,
    onTasksReload,
    orders,
    onOrderChanged,
    ...other
}) => {
    //Состояние меню сортировки
    const [menuOrders, setMenuOrders] = useState({ anchorMenuOrders: null, openOrders: false });

    //При нажатии на открытие меню сортировки
    const handleOrdersMenuButtonClick = event => {
        setMenuOrders(pv => ({ ...pv, anchorMenuOrders: event.currentTarget, openOrders: true }));
    };

    //При закрытии меню
    const handleOrdersMenuClose = () => {
        setMenuOrders(pv => ({ ...pv, anchorMenuOrders: null, openOrders: false }));
    };

    //Генерация содержимого
    return (
        <div>
            {isFilterDialogOpen ? (
                <FilterDialog
                    initial={{ filter, docLinks }}
                    // docLinks={docLinks}
                    onFilterChange={onFilterChange}
                    onFilterClose={onFilterClose}
                    onDocLinksLoad={onDocLinksLoad}
                />
            ) : null}
            <Box {...other}>
                <Stack direction="row" spacing={1} p={1} alignItems={"center"} sx={STYLES.STACK_FILTER}>
                    <IconButton title="Обновить" onClick={onTasksReload}>
                        <Icon>refresh</Icon>
                    </IconButton>
                    <IconButton title="Сортировать" sx={STYLES.ICON_ORDERS(orders)} onClick={handleOrdersMenuButtonClick}>
                        <Icon>sort</Icon>
                    </IconButton>
                    <IconButton title="Фильтр" onClick={onFilterOpen}>
                        <Icon>filter_alt</Icon>
                    </IconButton>
                    <Stack direction="row" spacing={1} alignItems={"center"} sx={STYLES.FILTERS_STACK}>
                        {filter.sState ? <FilterItem caption={"Состояние"} value={filter.sState} onClick={onFilterOpen} /> : null}
                        {filter.sType ? <FilterItem caption={"Тип"} value={filter.sType} onClick={onFilterOpen} /> : null}
                        {filter.sCrnName ? <FilterItem caption={"Каталог"} value={filter.sCrnName} onClick={onFilterOpen} /> : null}
                        {filter.bSubcatalogs ? <FilterItem caption={"Включая подкаталоги"} onClick={onFilterOpen} /> : null}
                        {filter.sSendPerson ? <FilterItem caption={"Исполнитель"} value={filter.sSendPerson} onClick={onFilterOpen} /> : null}
                        {filter.sSendDivision ? <FilterItem caption={"Подразделение"} value={filter.sSendDivision} onClick={onFilterOpen} /> : null}
                        {filter.sSendUsrGrp ? (
                            <FilterItem caption={"Группа пользователей"} value={filter.sSendUsrGrp} onClick={onFilterOpen} />
                        ) : null}
                        {filter.sDocLink && selectedDocLink ? (
                            <FilterItem caption={"Учётный документ"} value={selectedDocLink.descr} onClick={onFilterOpen} />
                        ) : null}
                    </Stack>
                </Stack>
                <SortMenu menuOrders={menuOrders} onOrdersMenuClose={handleOrdersMenuClose} orders={orders} onOrderChanged={onOrderChanged} />
            </Box>
        </div>
    );
};

//Контроль свойств компонента - Фильтр отбора
Filter.propTypes = {
    isFilterDialogOpen: PropTypes.bool.isRequired,
    filter: PropTypes.object.isRequired,
    docLinks: PropTypes.arrayOf(PropTypes.object),
    selectedDocLink: PropTypes.object,
    onFilterChange: PropTypes.func.isRequired,
    onDocLinksLoad: PropTypes.func,
    onFilterOpen: PropTypes.func.isRequired,
    onFilterClose: PropTypes.func.isRequired,
    onTasksReload: PropTypes.func.isRequired,
    orders: PropTypes.array,
    onOrderChanged: PropTypes.func.isRequired
};

//--------------------
//Интерфейс компонента
//--------------------

export { Filter };
