/*
    Парус 8 - Панели мониторинга - Редактор запросов
    Компонент: Диалог добавления сущности запроса
*/

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

import React, { useState } from "react"; //Классы React
import PropTypes from "prop-types"; //Контроль свойств компонента
import { Box, TextField, InputAdornment, Icon, IconButton } from "@mui/material"; //Интерфейсные элементы MUI
import { P8PDialog, P8P_DIALOG_WIDTH } from "../../../../components/p8p_dialog"; //Типовой диалог
import { P8PComponentInlineMessage } from "../../../../components/editors/p8p_component_inline_message"; //Типовое встраиваемое сообщение
import { TITLES } from "../../../../../app.text"; //Общие текстовые ресурсы приложения
import { EntsList } from "./ents_list"; //Список сущостей
import { useEntities, useDebounce } from "./hooks"; //Хуки для работы с сущностями

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

//Максимальная длина поисковой фразы для начала поиска (символов)
const FILTER_MIN_LENGTH = 3;

//Таймаут ожидания ввода поисковой фразы до начала поиска на сервере (мс)
const FILTER_TIMEOUT = 1000;

//Стили
const STYLES = {
    LIST_CONTAINER: { width: "100%", height: "500px" }
};

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

//Диалог добавления сущности запроса
const EntityAddDialog = ({ onSelect, onClose }) => {
    //Собственное состояние - фильтр сущностей
    const [filter, setFilter] = useState("");

    //Значение для отложенного поиска
    const debouncedFilter = useDebounce(filter, FILTER_TIMEOUT);

    //Доступные сущности
    const [ents] = useEntities(debouncedFilter, FILTER_MIN_LENGTH);

    //При выборе сущности в списке
    const handleSelect = ent => onSelect && onSelect({ ...ent });

    //Нажатие на кнопку "Закыть"
    const handleClose = () => onClose && onClose();

    //При изменении значения фильтра
    const handleFilterChange = e => setFilter(e.target.value);

    //При очистке фильтра
    const handleFilterClear = () => setFilter("");

    //Генерация содержимого
    return (
        <P8PDialog title={`${TITLES.INSERT} сущности`} width={P8P_DIALOG_WIDTH.SM} fullWidth onClose={handleClose}>
            <TextField
                margin={"normal"}
                variant={"standard"}
                fullWidth
                placeholder={"Поиск сущности..."}
                value={filter}
                onChange={handleFilterChange}
                InputProps={{
                    startAdornment: (
                        <InputAdornment position={"start"}>
                            <Icon>search</Icon>
                        </InputAdornment>
                    ),
                    endAdornment: (
                        <InputAdornment position={"end"}>
                            <IconButton onClick={handleFilterClear}>
                                <Icon>clear</Icon>
                            </IconButton>
                        </InputAdornment>
                    )
                }}
            />
            <Box sx={STYLES.LIST_CONTAINER} justifyContent={"center"} alignItems={"center"} display={"flex"}>
                {ents && <EntsList ents={ents} onSelect={handleSelect} />}
                {!ents && (
                    <P8PComponentInlineMessage
                        name={"Нет данных, соответствующих фильтру"}
                        message={
                            filter || String(filter).length > FILTER_MIN_LENGTH
                                ? "Измените значение фильтра для повторного поиска"
                                : `Начните ввод в строку поиска (не менее ${FILTER_MIN_LENGTH} символов)`
                        }
                    />
                )}
            </Box>
        </P8PDialog>
    );
};

//Контроль свойств - Диалог добавления сущности запроса
EntityAddDialog.propTypes = {
    onSelect: PropTypes.func,
    onClose: PropTypes.func
};

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

export { EntityAddDialog };
