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

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

import React from "react"; //Классы React
import PropTypes from "prop-types"; //Контроль свойств компонента
import { Chip, Stack, Icon, IconButton, Box } from "@mui/material"; //Интерфейсные компоненты
import { APP_STYLES } from "../../../app.styles"; //Типовые стили
import { formatDateRF } 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 FilterItem = ({ caption, value, onClick }) => {
    //При нажатии на элемент
    const handleClick = () => (onClick ? onClick() : null);

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

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

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

//Фильтр отбора
const Filter = ({ filter, onFilterOpen }) => {
    //При нажатии на элемент фильтра
    const handleClick = () => onFilterOpen && onFilterOpen();

    //Генерация содержимого
    return (
        <div>
            <Box>
                <Stack direction="row" spacing={1} p={1} alignItems={"center"} sx={STYLES.STACK_FILTER}>
                    <IconButton onClick={handleClick}>
                        <Icon>filter_alt</Icon>
                    </IconButton>
                    <Stack direction="row" spacing={1} alignItems={"center"} sx={STYLES.FILTERS_STACK}>
                        {filter.dDate ? <FilterItem caption={"На дату"} value={formatDateRF(filter.dDate)} onClick={handleClick} /> : null}
                        {filter.sCustomerDept ? (
                            <FilterItem caption={"Транспортный участок"} value={filter.sCustomerDept} onClick={handleClick} />
                        ) : null}
                    </Stack>
                </Stack>
            </Box>
        </div>
    );
};

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

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

export { Filter };