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

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

import React from "react"; //Классы React
import PropTypes from "prop-types"; //Контроль свойств компонента
import { Typography, Stack } from "@mui/material"; //Интерфейсные элементы
import { P8PEditorBox } from "../../components/editors/p8p_editor_box"; //Контейнер редактора
import { P8PChipList } from "../../components/editors/p8p_chip_list"; //Дополнительные настройки редактора
import { hasValue } from "../../core/utils"; //Вспомогательные процедуры и функции

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

//Стили
const STYLES = {
    STACK_ITEM: { alignItems: "center" },
    TYPOGRAPHY_INFO: { overflow: "hidden" }
};

//------------------------------------
//Вспомогательные функции и компоненты
//------------------------------------

const chipRender = item => {
    //Определяем описание переменной
    const description = item.description;
    //Определяем значение переменной
    const value = item.value ?? "";
    //Определяем заголовок
    const title = `${description}${value ? " - " : ""}${value}`;
    return (
        <Stack direction="row" spacing={1} sx={STYLES.STACK_ITEM}>
            <Typography variant="body2" title={title} sx={STYLES.TYPOGRAPHY_INFO}>
                <strong>{description}</strong>
                {`${value ? " - " : ""}${value}`}
            </Typography>
        </Stack>
    );
};

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

//Список переменных панели
const PanelVariableList = ({ valueProviders = {}, onValuesChange = null }) => {
    //При очистке значения переменной
    const handleVariableClear = index => onValuesChange && onValuesChange({ [values[index].key]: "" });

    //Определяем структуру переменных
    const values = Object.keys(valueProviders).reduce(
        (prev, key) => [
            ...prev,
            {
                description: valueProviders[key].description,
                value: valueProviders[key].value,
                deleteIcon: "filter_alt_off",
                disableDelete: !hasValue(valueProviders[key].value),
                key
            }
        ],
        []
    );

    //Формирование представления
    return (
        <P8PEditorBox title={"Переменные"}>
            <P8PChipList items={values} labelRender={chipRender} onDelete={onValuesChange ? index => handleVariableClear(index) : null} />
        </P8PEditorBox>
    );
};

//Контроль свойств компонента - список переменных панели
PanelVariableList.propTypes = {
    valueProviders: PropTypes.object,
    onValuesChange: PropTypes.func
};

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

export { PanelVariableList };
