/*
    Парус 8 - Панели мониторинга - ТОиР - Аналитика по ремонтам АТС
    Компонент: Фильтр отбора
*/

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

import React from "react"; //Классы React
import PropTypes from "prop-types"; //Контроль свойств компонента
import { Chip, Stack, Box } from "@mui/material"; //Интерфейсные компоненты
import { APP_STYLES } from "../../../app.styles"; //Типовые стили
import { hasValue } from "../../core/utils"; //Вспомогательные функции

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

//Стили
const STYLES = {
    FILTERS_STACK: {
        paddingBottom: "5px",
        ...APP_STYLES.SCROLL,
        overflowY: "auto",
        alignItems: "flex-end"
    },
    STACK_FILTER: { maxWidth: "99vw", alignItems: "flex-end" }
};

//Графики
const CHART_NAMES = {
    repairs: "REPAIRS",
    spendings: "SPENDINGS"
};

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

//Считывание наименования состояния
const getStateName = state => {
    return state === 0 ? "Не завершенные" : "Завершенные";
};

//Считывание типа затрат
const getTypeSpendings = type => {
    return type === 0 ? "Внутренние" : "Внешние";
};

//Элемент фильтра
const FilterItem = ({ field, caption, value, onDelete }) => {
    //При удалении фильтра
    const handleDelete = () => (onDelete ? onDelete(field) : null);

    //Генерация содержимого
    return (
        <Chip
            label={
                <Stack direction={"row"} alignItems={"center"}>
                    <strong>{caption}</strong>
                    {value ? `:\u00A0${value}` : null}
                </Stack>
            }
            variant="outlined"
            onDelete={handleDelete}
        />
    );
};

//Контроль свойств компонента - Элемент фильтра
FilterItem.propTypes = {
    field: PropTypes.string.isRequired,
    caption: PropTypes.string.isRequired,
    value: PropTypes.any,
    onDelete: PropTypes.func
};

//---------------
//Тело компонента
//---------------

//Фильтр отбора
const ChartFilter = ({ chartName, filter, onFilterChange }) => {
    //При удалении фильтра
    const handleDelete = field => onFilterChange && onFilterChange({ chartName, filter: { ...filter, [field]: null } });
    //Генерация содержимого
    return (
        <div>
            <Box>
                <Stack direction="row" spacing={1} p={1} alignItems={"center"} sx={STYLES.STACK_FILTER}>
                    <Stack direction="row" spacing={1} alignItems={"center"} sx={STYLES.FILTERS_STACK}>
                        {chartName === CHART_NAMES.repairs ? (
                            hasValue(filter.nState) ? (
                                <FilterItem field={"nState"} caption={"Состояние"} value={getStateName(filter.nState)} onDelete={handleDelete} />
                            ) : null
                        ) : chartName === CHART_NAMES.spendings ? (
                            <FilterItem field={"nType"} caption={"Тип затрат"} value={getTypeSpendings(filter.nType)} onDelete={handleDelete} />
                        ) : null}
                    </Stack>
                </Stack>
            </Box>
        </div>
    );
};

//Контроль свойств компонента - Фильтр отбора
ChartFilter.propTypes = {
    chartName: PropTypes.string,
    filter: PropTypes.object.isRequired,
    onFilterChange: PropTypes.func.isRequired
};

//--------------------
//Интерфейс компонента
//--------------------

export { ChartFilter };
