/*
    Парус 8 - Панели мониторинга - Редактор панелей
    Компоненты: Таблица (редактор настроек)
*/

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

import React, { useEffect, useState } from "react"; //Классы React
import PropTypes from "prop-types"; //Контроль свойств компонента
import { DATA_SOURCE_SHAPE, DataSource, EditorBox, EditorSubHeader } from "../editors_common"; //Общие компоненты редакторов
import "../../panels_editor.css"; //Стили редактора

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

//Таблица (редактор настроек)
const TableEditor = ({ id, dataSource = null, valueProviders = {}, onSettingsChange = null } = {}) => {
    //Собственное состояние - текущие настройки
    const [settings, setSettings] = useState(null);

    //При изменении компонента
    useEffect(() => {
        settings?.id != id && setSettings({ id, dataSource });
    }, [settings, id, dataSource]);

    //При сохранении изменений элемента
    const handleDataSourceChange = dataSource => setSettings(pv => ({ ...pv, dataSource: { ...dataSource } }));

    //При сохранении настроек
    const handleSave = (closeEditor = false) => onSettingsChange && onSettingsChange({ id, settings, closeEditor });

    //Формирование представления
    return (
        <EditorBox title={"Параметры таблицы"} onSave={handleSave}>
            <EditorSubHeader title={"Источник данных"} />
            <DataSource dataSource={settings?.dataSource} valueProviders={valueProviders} onChange={handleDataSourceChange} />
        </EditorBox>
    );
};

//Контроль свойств компонента - Таблица (редактор настроек)
TableEditor.propTypes = {
    id: PropTypes.string.isRequired,
    dataSource: DATA_SOURCE_SHAPE,
    valueProviders: PropTypes.object,
    onSettingsChange: PropTypes.func
};

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

export default TableEditor;