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

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

import React, { useState } from "react"; //Классы React
import PropTypes from "prop-types"; //Контроль свойств компонента
import { Button, Menu, MenuItem, Icon, ListItemIcon, Stack, Typography } from "@mui/material"; //Интерфейсные компоненты MUI
import { P8PEditorSubHeader } from "../../../../components/editors/p8p_editor_sub_header"; //Подзаголовок

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

//Типы компонентов
const COMPONENT_TYPE = {
    DIVIDER: "divider",
    ITEM: "item"
};

//Высота элемента меню для компонента
const ITEM_HEIGHT = 48;

//Количество одновременно отображаемых элементов (остальные - прокруткой)
const ITEM_DSPL_COUNT = 10;

//Стили
const STYLES = {
    MENU_PAPER: {
        maxHeight: ITEM_HEIGHT * ITEM_DSPL_COUNT,
        maxWidth: "400px",
        overflow: "auto"
    }
};

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

//Проверка строкового свойства, обязательного для компонента типа "ITEM"
const checkReqStringPropForItem = (props, propName, componentName) => {
    if (props.type === COMPONENT_TYPE.ITEM && !props[propName]) {
        return new Error(`Prop \`${propName}\` is required when \`type\` is \`${COMPONENT_TYPE.ITEM}\` in \`${componentName}\`.`);
    }
    if (props[propName] && typeof props[propName] !== "string" && !(props[propName] instanceof String)) {
        return new Error(`Prop \`${propName}\` must be a string`);
    }
    return null;
};

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

//Кнопка выбора компонента условия
const CondComponentSelectButton = ({ caption, components = [], onSelect }) => {
    //Собственное состояние - элемент привязки меню
    const [anchorEl, setAnchorEl] = useState(null);

    //При нажатии на кнопку
    const handleButtonClick = event => setAnchorEl(event.currentTarget);

    //При закрытии меню
    const handleClose = () => setAnchorEl(null);

    //При нажатии на элемент меню
    const handleComponentClick = component => {
        handleClose();
        onSelect && onSelect(component.value);
    };

    //Расчет флага открытия меню
    const open = Boolean(anchorEl);

    //Формирование представления
    return (
        <>
            <Button onClick={handleButtonClick} endIcon={<Icon>{open ? "arrow_drop_up" : "arrow_drop_down"}</Icon>}>
                {caption}
            </Button>
            <Menu
                anchorEl={anchorEl}
                open={open}
                onClose={handleClose}
                PaperProps={{
                    style: STYLES.MENU_PAPER,
                    //Импорт общесистемного JS-стиля не работает здесь, только через общесистемный CSS-класс
                    className: "scroll"
                }}
            >
                {components.map((component, i) =>
                    component.type === COMPONENT_TYPE.DIVIDER ? (
                        <P8PEditorSubHeader key={i} title={component.title} paddingTop={0} />
                    ) : (
                        <MenuItem key={i} onClick={() => handleComponentClick(component)}>
                            <ListItemIcon>
                                <Icon fontSize={"small"}>{component.icon}</Icon>
                            </ListItemIcon>
                            <Stack direction={"column"}>
                                <Typography noWrap variant={"body2"} title={component.title}>
                                    {component.title}
                                </Typography>
                                <Typography noWrap variant={"caption"} color={"text.secondary"} title={component.name}>
                                    {component.name}
                                </Typography>
                            </Stack>
                        </MenuItem>
                    )
                )}
            </Menu>
        </>
    );
};

//Контроль свойств - Кнопка выбора компонента условия
CondComponentSelectButton.propTypes = {
    caption: PropTypes.string.isRequired,
    components: PropTypes.arrayOf(
        PropTypes.shape({
            type: PropTypes.oneOf(Object.values(COMPONENT_TYPE)).isRequired,
            title: PropTypes.string.isRequired,
            name: checkReqStringPropForItem,
            icon: checkReqStringPropForItem,
            value: PropTypes.any
        })
    ),
    onSelect: PropTypes.func.isRequired
};

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

export { CondComponentSelectButton, COMPONENT_TYPE };
