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

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

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

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

//Стили
const STYLES = {
    LIST_PANELS: { height: "500px", width: "360px", bgcolor: "background.paper", overflowY: "auto", ...APP_STYLES.SCROLL },
    SMALL_TOOL_ICON: {
        fontSize: 20
    }
};

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

//Структура данных о сущности панели
const PANELS_LIST_ITEM_SHAPE = PropTypes.shape({
    rn: PropTypes.number.isRequired,
    code: PropTypes.string.isRequired,
    name: PropTypes.string.isRequired,
    author: PropTypes.string.isRequired,
    chDate: PropTypes.string.isRequired,
    modify: PropTypes.oneOf([0, 1]).isRequired,
    pbl: PropTypes.oneOf([0, 1]).isRequired,
    ready: PropTypes.oneOf([0, 1]).isRequired
});

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

//Диалог открытия панели
const PanelsList = ({
    panels = [],
    isEditable = true,
    current = null,
    onSelect = null,
    onPbl = null,
    onReady = null,
    onEdit = null,
    onDelete = null
} = {}) => {
    //При выборе элемента списка
    const handleSelectClick = query => {
        onSelect && onSelect(query);
    };

    //При нажатии на общедоступность
    const handlePblClick = (e, query) => {
        e.stopPropagation();
        onPbl && onPbl(query);
    };

    //При нажатии на готовность
    const handleReadyClick = (e, query) => {
        e.stopPropagation();
        onReady && onReady(query);
    };

    //При нажатии на исправлении
    const handleEditClick = (e, query) => {
        e.stopPropagation();
        onEdit && onEdit(query);
    };

    //При нажатии на удаление
    const handleDeleteClick = (e, query) => {
        e.stopPropagation();
        onDelete && onDelete(query);
    };

    //Формирование представления
    return (
        <List sx={STYLES.LIST_PANELS}>
            {panels.map((panel, i) => {
                const selected = panel.rn === current || panel.code === current;
                const disabled = !panel.modify;
                const pblTitle = `${panel.pbl === 1 ? "Общедоступный" : "Приватный"}${!disabled ? " - нажмите, чтобы изменить" : ""}`;
                const pblIcon = panel.pbl === 1 ? "groups" : "lock_person";
                const readyTitle = `${panel.ready === 1 ? "Готов" : "Не готов"}${!disabled ? " - нажмите, чтобы изменить" : ""}`;
                const readyIcon = panel.ready === 1 ? "touch_app" : "do_not_touch";
                return (
                    <ListItem key={i}>
                        <ListItemButton onClick={() => handleSelectClick(panel)} selected={selected}>
                            <ListItemText
                                primary={panel.name}
                                secondaryTypographyProps={{ component: "div" }}
                                secondary={
                                    <Stack direction={"column"}>
                                        <Typography variant={"caption"}>{`${panel.code}, ${panel.author}, ${panel.chDate}`}</Typography>
                                        {isEditable ? (
                                            <Stack direction={"row"}>
                                                <div title={pblTitle}>
                                                    <IconButton disabled={disabled} onClick={e => handlePblClick(e, panel)}>
                                                        <Icon sx={STYLES.SMALL_TOOL_ICON}>{pblIcon}</Icon>
                                                    </IconButton>
                                                </div>
                                                <div title={readyTitle}>
                                                    <IconButton disabled={disabled} onClick={e => handleReadyClick(e, panel)}>
                                                        <Icon sx={STYLES.SMALL_TOOL_ICON}>{readyIcon}</Icon>
                                                    </IconButton>
                                                </div>
                                            </Stack>
                                        ) : null}
                                    </Stack>
                                }
                            />
                            {isEditable ? (
                                <Stack direction={"row"}>
                                    <IconButton onClick={e => handleEditClick(e, panel)} disabled={disabled} title={BUTTONS.UPDATE}>
                                        <Icon>edit</Icon>
                                    </IconButton>
                                    <IconButton onClick={e => handleDeleteClick(e, panel)} disabled={disabled} title={BUTTONS.DELETE}>
                                        <Icon>delete</Icon>
                                    </IconButton>
                                </Stack>
                            ) : null}
                        </ListItemButton>
                    </ListItem>
                );
            })}
        </List>
    );
};

//Контроль свойств компонента - Список панелей
PanelsList.propTypes = {
    panels: PropTypes.arrayOf(PANELS_LIST_ITEM_SHAPE),
    current: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    isEditable: PropTypes.bool,
    onSelect: PropTypes.func,
    onPbl: PropTypes.func,
    onReady: PropTypes.func,
    onEdit: PropTypes.func,
    onDelete: PropTypes.func
};

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

export { PanelsList };
