/*
    Парус 8 - Панели мониторинга - ПУП - Информация о проектах
    Фильтр
*/

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

import React, { useState } from "react"; //Классы React
import PropTypes from "prop-types"; //Контроль свойств компонента
import { Grid, Chip, Stack, Input, InputAdornment, IconButton, Icon } from "@mui/material"; //Интерфейсные элементы
import { FILTER_INITIAL, FILTER_ITEMS, PRICE_STRUCT_STATUS, PROJECT_STATE, FilterDialog } from "./filter_dialog"; //Компонент "Диалог фильтра"

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

//Стили
const STYLES = {
    CONTAINER: { paddingTop: "10px" },
    FILTER: { maxWidth: "99vw" },
    SEARCH_GRID_ITEM: { paddingRight: "15px" }
};

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

//Элемент фильтра
const FilterItem = ({ caption, value, defaultValue, onClick, onDelete }) => {
    //При нажатии на элемент
    const handleClick = () => (onClick ? onClick() : null);

    //При нажатии на удаление элемента
    const handleDelete = () => (onDelete ? onDelete() : null);

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

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

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

//Фильтр
const Filter = ({ values, onChange }) => {
    //Собственное состояние - отображение диалога ввода значений фильтра
    const [isOpen, setIsOpen] = useState(false);

    //Собственное состояние - строка поиска
    const [search, setSearch] = useState(values.search);

    //Передача сообщения об измении фильтра родителю
    const notifyChange = values => (onChange ? onChange(values) : null);

    //При закрытии диалога с сохранением значений
    const handleFilterDialogOk = values => {
        setIsOpen(false);
        notifyChange(values);
    };

    //При закрытии диалога без сохранения значений
    const handleFilterDialogCancel = () => setIsOpen(false);

    //При нажатии на фильтр
    const handleClick = () => setIsOpen(true);

    //При выполнении поиска
    const handleDoSearch = (clear = false) => {
        if (clear === true) setSearch("");
        notifyChange({ ...values, search: clear === true ? "" : search });
    };

    //При изменении значения в строке поиска
    const handleSearchChange = e => setSearch(e.target.value);

    //При нажатии клавиши в строке поиска
    const handleSearchKeyPress = e => ([13, 27].includes(e.keyCode) ? handleDoSearch(e.keyCode == 27) : null);

    //Формирование функции обработки очистки элемента фильтар
    const buildFilterItemClearHandler = сode =>
        values[сode] != FILTER_INITIAL[сode] ? () => notifyChange({ ...values, [сode]: FILTER_INITIAL[сode] }) : null;

    //Генерация содержимого
    return (
        <Grid container sx={STYLES.CONTAINER}>
            <Grid xs={10} item>
                {isOpen ? <FilterDialog valuesInitial={values} onOk={handleFilterDialogOk} onCancel={handleFilterDialogCancel} /> : null}
                <Stack direction="row" spacing={1} p={1} alignItems={"center"} sx={STYLES.FILTER} onClick={handleClick}>
                    <FilterItem
                        caption={"Тип заказа"}
                        value={values.prjType}
                        defaultValue={"Любой"}
                        onDelete={buildFilterItemClearHandler("prjType")}
                    />
                    <FilterItem
                        caption={"Подразделение-ответственный"}
                        defaultValue={"Любое"}
                        value={values.insDep}
                        onDelete={buildFilterItemClearHandler("insDep")}
                    />
                    <FilterItem
                        caption={"Статус структуры цены"}
                        defaultValue={"Неподдерживаемое значение"}
                        value={PRICE_STRUCT_STATUS.find(item => item.value == values.priceStructStatus)?.name}
                        onDelete={buildFilterItemClearHandler("priceStructStatus")}
                    />
                    <FilterItem
                        caption={"Состояние проекта"}
                        defaultValue={"Неподдерживаемое значение"}
                        value={PROJECT_STATE.find(item => item.value == values.prjState)?.name}
                        onDelete={buildFilterItemClearHandler("prjState")}
                    />
                </Stack>
            </Grid>
            <Grid xs={2} item sx={STYLES.SEARCH_GRID_ITEM}>
                <Input
                    fullWidth
                    placeholder="Поиск..."
                    value={search}
                    endAdornment={
                        <InputAdornment position="end">
                            <IconButton onClick={() => handleDoSearch(true)}>
                                <Icon>clear</Icon>
                            </IconButton>
                            <IconButton onClick={handleDoSearch}>
                                <Icon>search</Icon>
                            </IconButton>
                        </InputAdornment>
                    }
                    onKeyDown={handleSearchKeyPress}
                    onChange={handleSearchChange}
                />
            </Grid>
        </Grid>
    );
};

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

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

export { FILTER_INITIAL, Filter };
