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

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

import React from "react"; //Классы React
import PropTypes from "prop-types"; //Контроль свойств компонента
import { List } from "@mui/material"; //Интерфейсные компоненты MUI
import { APP_STYLES } from "../../../../../app.styles"; //Общие стили приложения
import { Argument, ARGUMENT_VARIANT, ARGUMENT_SHAPE } from "../argument/argument"; //Аргумент запроса

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

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

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

//Список аргументов
const ArgsList = ({ args = [], onSelect = null, onDelete = null } = {}) => {
    //При нажатии на элемент списка
    const handleItemClick = arg => onSelect && onSelect(arg);

    //При нажатии на удалении элемента списка
    const handleItemDeleteClick = (e, arg) => {
        e.stopPropagation();
        onDelete && onDelete(arg);
    };

    //Формирование представления
    return (
        <List sx={STYLES.LIST}>
            {args &&
                args.map((arg, i) => (
                    <Argument key={i} arg={arg} variant={ARGUMENT_VARIANT.LIST_ITEM} onClick={handleItemClick} onDelete={handleItemDeleteClick} />
                ))}
        </List>
    );
};

//Контроль свойств компонента - Список аргументов
ArgsList.propTypes = {
    args: PropTypes.arrayOf(ARGUMENT_SHAPE),
    onSelect: PropTypes.func,
    onDelete: PropTypes.func
};

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

export { ArgsList };
