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

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

import React from "react"; //Классы React
import PropTypes from "prop-types"; //Контроль свойств компонента
import { Paper, Stack, Typography, Icon } from "@mui/material"; //Интерфейсные элементы
import { useComponentDataSource } from "../components_hooks"; //Хуки для данных
import { DATA_SOURCE_SHAPE } from "../editors_common"; //Общие объекты компонентов
import { COMPONENT_MESSAGE_TYPE, COMPONENT_MESSAGES, ComponentInlineMessage } from "../views_common"; //Общие компоненты представлений
import "../../panels_editor.css"; //Стили редактора

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

//Иконка компонента
const COMPONENT_ICON = "speed";

//Наименование компонента
const COMPONENT_NAME = "Индикатор";

//Типовые цвета
const COLOR = {
    OK: "#00ffaaa0",
    OK_CONTR: "white",
    ERR: "#ff0000a0",
    ERR_CONTR: "white",
    WARN: "orange",
    WARN_CONTR: "white",
    UNDEFINED: "#dcdcdca0",
    UNDEFINED_CONTR: "black",
    INACTIVE: "#A9A9A9",
    INACTIVE_CONTR: "black"
};

//Состояния
const INDICATOR_STATE = {
    UNDEFINED: "UNDEFINED",
    OK: "OK",
    ERR: "ERR",
    WARN: "WARN"
};

//Цвета заливки
const BG_COLOR = {
    [INDICATOR_STATE.OK]: COLOR.OK,
    [INDICATOR_STATE.ERR]: COLOR.ERR,
    [INDICATOR_STATE.WARN]: COLOR.WARN
};

//Цвета иконок
const ICON_COLOR = {
    [INDICATOR_STATE.OK]: COLOR.OK_CONTR,
    [INDICATOR_STATE.ERR]: COLOR.ERR_CONTR,
    [INDICATOR_STATE.WARN]: COLOR.WARN_CONTR
};

//Стили
const STYLES = {
    CONTAINER: state => ({
        ...(BG_COLOR[state] ? { backgroundColor: BG_COLOR[state] } : {}),
        height: "100%",
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center",
        overflow: "hidden",
        padding: "10px"
    }),
    STACK: { padding: "10px", width: "100%" },
    ICON: state => ({ fontSize: "100px", ...(ICON_COLOR[state] ? { color: ICON_COLOR[state] } : {}) })
};

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

//Индикатор (представление)
const Indicator = ({ dataSource = null, values = {} } = {}) => {
    //Собственное состояние - данные
    const [data, error] = useComponentDataSource({ dataSource, values });

    //Флаг настроенности индикатора
    const haveConfing = dataSource?.stored ? true : false;

    //Флаг наличия данных
    const haveData = data?.init === true && !error ? true : false;

    //Данные индикатора
    const indicator = data?.XINDICATOR || {};

    //Формирование представления
    return (
        <Paper sx={STYLES.CONTAINER(indicator?.state)} elevation={6}>
            {haveConfing && haveData ? (
                <Stack direction={"row"} alignItems={"center"} justifyContent={"space-between"} style={STYLES.STACK}>
                    <Stack direction={"column"}>
                        <Typography variant={"h4"}>{[undefined, null, ""].includes(indicator.value) ? "н.д." : indicator.value}</Typography>
                        <Typography>{indicator.caption}</Typography>
                    </Stack>
                    {indicator.icon ? <Icon sx={STYLES.ICON(indicator.state)}>{indicator.icon}</Icon> : null}
                </Stack>
            ) : (
                <ComponentInlineMessage
                    icon={COMPONENT_ICON}
                    name={COMPONENT_NAME}
                    message={!haveConfing ? COMPONENT_MESSAGES.NO_SETTINGS : error ? error : COMPONENT_MESSAGES.NO_DATA_FOUND}
                    type={error ? COMPONENT_MESSAGE_TYPE.ERROR : COMPONENT_MESSAGE_TYPE.COMMON}
                />
            )}
        </Paper>
    );
};

//Контроль свойств компонента - Индикатор (представление)
Indicator.propTypes = {
    dataSource: DATA_SOURCE_SHAPE,
    values: PropTypes.object
};

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

export default Indicator;