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

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

import React from "react"; //Классы React
import PropTypes from "prop-types"; //Контроль свойств компонента
import { Stack, Typography } from "@mui/material"; //Интерфейсные элементы
import { P8P_STACK_HEADER_INDICATOR } from "../../theme/styles/stack"; //Стили для групповой информации
import { TEXTS } from "../../../app.text"; //Текстовые ресурсы и константы
import { P8P_TYPOGRAPHY_VARIANT } from "../../theme/p8p_typography"; //Варианты шрифтов
import { P8P_HEADER_INDICATOR_STATE } from "./p8p_header_constants"; //Константы заголовка
import { P8P_TYPOGRAPY_HDR_INDICATOR } from "../../theme/styles/typography"; //Стили текста
import { P8PHeaderItem } from "./components/p8p_header_item"; //Элемент заголовка

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

//Индикатор
const P8PHeaderIndicator = ({ caption, value, state = P8P_HEADER_INDICATOR_STATE.UNDEFINED, disableCaptionColor = false, width, color, onClick }) => {
    //При нажатии на текст
    const handleClick = () => onClick && onClick({ caption, value });

    //Генерация содержимого
    return (
        <P8PHeaderItem width={width}>
            <Stack sx={P8P_STACK_HEADER_INDICATOR({ isClickable: onClick ? true : false })} onClick={handleClick}>
                <Typography
                    variant={P8P_TYPOGRAPHY_VARIANT.BODY2}
                    sx={P8P_TYPOGRAPY_HDR_INDICATOR({ maxLines: 1, state, isDefaultColor: disableCaptionColor, color })}
                    title={caption}
                >
                    {caption}
                </Typography>
                <Typography variant={P8P_TYPOGRAPHY_VARIANT.BODY2} sx={P8P_TYPOGRAPY_HDR_INDICATOR({ maxLines: 1, state, color })} title={value}>
                    {[undefined, null, ""].includes(value) ? TEXTS.NO_DATA_FOUND_SHORT : value}
                </Typography>
            </Stack>
        </P8PHeaderItem>
    );
};

//Контроль свойств - Индикатор
P8PHeaderIndicator.propTypes = {
    caption: PropTypes.string.isRequired,
    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    state: PropTypes.oneOf(Object.values(P8P_HEADER_INDICATOR_STATE)),
    disableCaptionColor: PropTypes.bool,
    width: PropTypes.string,
    color: PropTypes.string,
    onClick: PropTypes.func
};

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

export { P8PHeaderIndicator };