/*
    Парус 8 - Панели мониторинга - Редактор панелей
    Представление компонента панели
*/

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

import React from "react"; //Классы React
import PropTypes from "prop-types"; //Контроль свойств компонента
import { Box, Typography } from "@mui/material"; //Интерфейсные элементы
import { useComponentModule } from "./components/components_hooks"; //Хуки компонентов

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

//Представление компонента панели
const ComponentView = ({ id, path, settings = {}, values = {}, onValuesChange = null } = {}) => {
    //Подгрузка модуля представления компонента (lazy здесь постоянно обновлялся при смене props, поэтому на хуке, от props независимого)
    const [ComponentView, init] = useComponentModule({ path, module: "view" });

    //При смене значений
    const handleValuesChange = values => onValuesChange && onValuesChange(id, values);

    //Расчёт флага наличия компонента
    const haveComponent = path ? true : false;

    //Формирование представления
    return (
        <Box className={"component-view__wrap"}>
            {haveComponent && init && <ComponentView.default id={id} {...settings} values={values} onValuesChange={handleValuesChange} />}
            {!haveComponent && <Typography align={"center"}>Компонент не определён</Typography>}
        </Box>
    );
};

//Контроль свойств компонента - компонент панели
ComponentView.propTypes = {
    id: PropTypes.string.isRequired,
    path: PropTypes.string.isRequired,
    settings: PropTypes.object,
    values: PropTypes.object,
    onValuesChange: PropTypes.func
};

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

export { ComponentView };

//--------------------------
//ВАЖНО: Можно на React.lazy
//--------------------------

//ПРИМЕР:
/*
import React, { Suspense, lazy } from "react"; //Классы React
const ComponentView = ({ path = null, props = {} } = {}) => {
    const haveComponent = path ? true : false;
    const ComponentView = haveComponent ? lazy(() => import(`./components/${path}/view`)) : null;
    return (
        <Paper sx={STYLES.CONTAINER}>
            {haveComponent && (<Suspense fallback={null}><ComponentView {...props}/></Suspense>)}
            {!haveComponent && <Typography align={"center"}>Компонент не определён</Typography>}
        </Paper>
    );
};
*/