/*
    Парус 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 { APP_STYLES } from "../../../../../app.styles"; //Общие стили приложения
import { BUTTONS } from "../../../../../app.text"; //Общие текстовые ресурсы приложения

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

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

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

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

//Контроль свойств компонента - Список запросов
QueriesList.propTypes = {
    queries: PropTypes.arrayOf(QUERIES_LIST_ITEM_SHAPE),
    current: PropTypes.number,
    onSelect: PropTypes.func,
    onPbl: PropTypes.func,
    onReady: PropTypes.func,
    onEdit: PropTypes.func,
    onDelete: PropTypes.func
};

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

export { QueriesList };
