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

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

import React from "react"; //Классы React
import PropTypes from "prop-types"; //Контроль свойств компонента
import { Stack, List, ListItem, ListItemButton, ListItemText, Typography } from "@mui/material"; //Интерфейсные элементы
import { P8PConfigDialog } from "./p8p_config_dialog"; //Типовой диалог настройки

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

//Стили
const STYLES = {
    LIST: { height: "500px", width: "360px", bgcolor: "background.paper", overflowY: "auto" }
};

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

//Диалог выбора записи редактора запросов
const P8PDataSourceQuerySelector = ({ current = null, onSelect, onCancel }) => {
    //!!! НА РЕАЛИЗАЦИИ
    const test = [{ code: "TestCode", name: "TestName" }];
    //При выборе элемента списка
    const handleSelectClick = query => {
        onSelect && onSelect(query);
    };

    //Формирование представления
    return (
        <P8PConfigDialog title={"Запросы"} onCancel={onCancel}>
            <List sx={STYLES.LIST}>
                {test.map((query, i) => {
                    const selected = query.code === current;
                    return (
                        <ListItem key={i}>
                            <ListItemButton onClick={() => handleSelectClick(query)} selected={selected}>
                                <ListItemText
                                    primary={query.code}
                                    secondaryTypographyProps={{ component: "div" }}
                                    secondary={
                                        <Stack direction={"column"}>
                                            <Typography variant={"caption"}>{`${query.code}, ${query.name}`}</Typography>
                                        </Stack>
                                    }
                                />
                            </ListItemButton>
                        </ListItem>
                    );
                })}
            </List>
        </P8PConfigDialog>
    );
};

//Контроль свойств компонента - Диалог выбора записи редактора запросов
P8PDataSourceQuerySelector.propTypes = {
    current: PropTypes.string,
    onSelect: PropTypes.func.isRequired,
    onCancel: PropTypes.func.isRequired
};

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

export { P8PDataSourceQuerySelector };
