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

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

import React from "react"; //Классы React
import PropTypes from "prop-types"; //Контроль свойств компонента
import { Chip, Typography, Stack, Icon } from "@mui/material"; //Интерфейсные элементы
import { STYLES as COMMON_STYLES } from "./p8p_editors_common"; //Общие ресурсы редакторов

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

//Стили
const STYLES = {
    CHIP_ITEM: { ...COMMON_STYLES.CHIP(true, false) },
    STACK_ITEM: { alignItems: "center" },
    TYPOGRAPHY_INFO: { overflow: "hidden" }
};

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

//Список элементов
const P8PChipList = ({ items, labelRender, onClick, onDelete }) => {
    //При нажатии на элемент
    const handleClick = index => onClick && onClick(index);

    //При удалении элемента
    const handleDelete = index => onDelete && onDelete(index);

    //Формирование представления
    return (
        <>
            {Array.isArray(items) &&
                items.length > 0 &&
                items.map((item, i) => (
                    <Chip
                        key={i}
                        label={
                            labelRender ? (
                                labelRender(item)
                            ) : (
                                <Stack direction="row" spacing={1} sx={STYLES.STACK_ITEM}>
                                    {item.icon ? (
                                        <>
                                            <Icon sx={{ color: "grey" }} title={item?.iconTitle}>
                                                {item.icon}
                                            </Icon>
                                            <Typography variant="body2">-</Typography>
                                        </>
                                    ) : null}
                                    <Typography variant="body2" title={item?.title} sx={STYLES.TYPOGRAPHY_INFO}>
                                        {item.text}
                                    </Typography>
                                </Stack>
                            )
                        }
                        variant={"outlined"}
                        onClick={onClick && !item.disableClick ? () => handleClick(i) : null}
                        onDelete={onDelete && !item.disableDelete ? () => handleDelete(i) : null}
                        deleteIcon={item.deleteIcon ? <Icon>{item.deleteIcon}</Icon> : null}
                        sx={STYLES.CHIP_ITEM}
                    />
                ))}
        </>
    );
};

//Контроль свойств - список элементов
P8PChipList.propTypes = {
    items: PropTypes.array,
    labelRender: PropTypes.func,
    onClick: PropTypes.func,
    onDelete: PropTypes.func
};

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

export { P8PChipList };