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

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

import React, { useEffect, useState } from "react"; //Классы React
import PropTypes from "prop-types"; //Контроль свойств компонента
import { P8PEditorBox } from "../../../../components/editors/p8p_editor_box"; //Контейнер редактора
import { P8PEditorSubHeader } from "../../../../components/editors/p8p_editor_sub_header"; //Заголовок раздела редактора
import { P8P_DATA_SOURCE_SHAPE } from "../../../../components/editors/p8p_data_source_common"; //Общие ресурсы источника данных
import { P8PDataSource } from "../../../../components/editors/p8p_data_source"; //Источник данных
import { P8P_CA_SHAPE, P8P_CAS_INITIAL } from "../../../../components/editors/p8p_component_action/common"; //Общие ресурсы действий
import { P8P_CA_CHART_VALUE_TYPES, P8P_CA_CHART_ACTION_AREAS } from "./action"; //Общие ресурсы действий графика
import { P8PActions } from "../../../../components/editors/p8p_actions"; //Действия

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

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

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

    //При изменении действий
    const handleActionsChange = actions => setSettings(pv => ({ ...pv, actions }));

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

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

    //Формирование представления
    return (
        <P8PEditorBox title={"Параметры графика"} onSave={handleSave}>
            <P8PEditorSubHeader title={"Источник данных"} />
            <P8PDataSource dataSource={settings?.dataSource} valueProviders={valueProviders} onChange={handleDataSourceChange} />
            <P8PEditorSubHeader title={"Действия"} />
            <P8PActions
                actions={settings?.actions}
                valueProviders={valueProviders}
                areas={P8P_CA_CHART_ACTION_AREAS}
                valueTypes={P8P_CA_CHART_VALUE_TYPES}
                onChange={handleActionsChange}
            />
        </P8PEditorBox>
    );
};

//Контроль свойств компонента - График (редактор настроек)
ChartEditor.propTypes = {
    id: PropTypes.string.isRequired,
    dataSource: P8P_DATA_SOURCE_SHAPE,
    valueProviders: PropTypes.object,
    actions: PropTypes.arrayOf(P8P_CA_SHAPE),
    onSettingsChange: PropTypes.func
};

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

export default ChartEditor;