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

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

import React from "react"; //Классы React
import PropTypes from "prop-types"; //Контроль свойств компонента
import { Stack, List, ListItem, IconButton, Icon, ListItemButton, ListItemText, ListItemIcon, Checkbox, Typography } from "@mui/material"; //Интерфейсные компоненты MUI
import { ATTRIBUTE_SHAPE, attrGetUse, attrGetShow } from "../attribute/attribute"; //Атрибут сущности
import { APP_STYLES } from "../../../../../app.styles"; //Общие стили приложения

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

//Стили
const STYLES = {
    SMALL_TOOL_ICON: {
        fontSize: 20
    },
    LIST: { height: "100%", width: "100%", bgcolor: "background.paper", overflowY: "auto", ...APP_STYLES.SCROLL }
};

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

//Список атрибутов сущности
const AttrsList = ({ attrs = [], onSelect = null, onShow = null, onSetup = null } = {}) => {
    //При выборе элемента списка
    const handleSelectClick = attr => {
        onSelect && onSelect(attr);
    };

    //При нажатии на кнопку изменения видимости атрибута
    const handleShowClick = (e, attr) => {
        e.stopPropagation();
        onShow && onShow(attr);
    };

    //При нажатии на кнопку настройки атрибута
    const handleSetupClick = (e, attr) => {
        e.stopPropagation();
        onSetup && onSetup(attr);
    };

    //Формирование представления
    return (
        <List sx={STYLES.LIST}>
            {attrs &&
                attrs.map((attr, i) => {
                    const [selected, selectedTitle] = attrGetUse(attr, true);
                    const [showTitle, showIcon] = attrGetShow(attr, true);
                    return (
                        <ListItem key={i} disablePadding>
                            <ListItemButton onClick={() => handleSelectClick(attr)} selected={selected} dense>
                                <ListItemIcon>
                                    <Checkbox edge={"start"} checked={selected} tabIndex={-1} disableRipple title={selectedTitle} />
                                </ListItemIcon>
                                <ListItemText
                                    primary={attr.title}
                                    secondaryTypographyProps={{ component: "div" }}
                                    secondary={
                                        <Stack direction={"column"}>
                                            <Typography variant={"caption"}>{`${attr.name}${attr.alias ? ` (${attr.alias})` : ""}`}</Typography>
                                        </Stack>
                                    }
                                />
                                <Stack direction={"row"}>
                                    <IconButton onClick={e => handleShowClick(e, attr)} title={showTitle}>
                                        <Icon>{showIcon}</Icon>
                                    </IconButton>
                                    <IconButton onClick={e => handleSetupClick(e, attr)} title={"Настроить"}>
                                        <Icon>settings</Icon>
                                    </IconButton>
                                </Stack>
                            </ListItemButton>
                        </ListItem>
                    );
                })}
        </List>
    );
};

//Контроль свойств компонента - Список атрибутов сущности
AttrsList.propTypes = {
    attrs: PropTypes.arrayOf(ATTRIBUTE_SHAPE),
    onSelect: PropTypes.func,
    onShow: PropTypes.func,
    onSetup: PropTypes.func
};

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

export { AttrsList };
