/*
    Парус 8 - Панели мониторинга - Редактор запросов
    Компоненты: Атрибут сущности
*/

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

import React from "react"; //Классы React
import PropTypes from "prop-types"; //Контроль свойств компонента
import { Handle, Position, useStore } from "reactflow"; //Библиотека редактора диаграмм
import { Box, Stack, Icon, Typography } from "@mui/material"; //Компоненты UI
import { DATA_TYPE } from "../../common"; //Общие ресурсы и константы редактора

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

//Типовые цвета точек привязки
const HANDLE_BORDER_COLOR = "#69db7c";
const HANDLE_BORDER_COLOR_DISABLED = "#adb5bd";

//Стили
const STYLES = {
    CONTAINER: { display: "flex", width: "100%", height: "100%" },
    HANDLE_SOURCE: isConnecting => ({
        width: 14,
        height: 14,
        right: -10,
        border: `2px solid ${isConnecting ? HANDLE_BORDER_COLOR_DISABLED : HANDLE_BORDER_COLOR}`,
        borderRadius: 7,
        background: "white"
    }),
    HANDLE_TARGET: isConnecting => ({
        width: isConnecting ? 14 : 0,
        height: 14,
        left: isConnecting ? -7 : 0,
        border: `2px solid ${HANDLE_BORDER_COLOR}`,
        borderRadius: 7,
        background: "white",
        visibility: isConnecting ? "visible" : "hidden"
    }),
    CONTENT_STACK: { width: "100%" },
    TITLE_NAME_STACK: { width: "100%", containerType: "inline-size" }
};

//Иконки
const ICONS = {
    [DATA_TYPE.STR]: "format_align_left",
    [DATA_TYPE.NUMB]: "pin",
    [DATA_TYPE.DATE]: "calendar_month",
    DEFAULT: "category"
};

//Структура данных об атрибуте сущности
const ATTRIBUTE_DATA_SHAPE = PropTypes.shape({
    name: PropTypes.string.isRequired,
    title: PropTypes.string.isRequired,
    dataType: PropTypes.number.isRequired
});

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

//Атрибут сущности
const Attribute = ({ data }) => {
    //Поиск идентификатора соединяемого элемента
    const connectionNodeId = useStore(state => state.connectionNodeId);

    //Флаг выполнения соединения сущностей
    const isConnecting = Boolean(connectionNodeId);

    //Формирование представления
    return (
        <Box p={1} sx={STYLES.CONTAINER}>
            <Handle type={"source"} position={Position.Right} style={STYLES.HANDLE_SOURCE(isConnecting)} />
            <Handle type={"target"} position={Position.Left} isConnectableStart={false} style={STYLES.HANDLE_TARGET(isConnecting)} />
            <Stack direction={"row"} alignItems={"center"} spacing={1} sx={STYLES.CONTENT_STACK}>
                <Icon color={"action"}>{ICONS[data.dataType] || ICONS.DEFAULT}</Icon>
                <Stack direction={"column"} alignItems={"left"} sx={STYLES.TITLE_NAME_STACK}>
                    <Typography variant={"body2"} noWrap title={data.title}>
                        {data.title}
                    </Typography>
                    <Typography variant={"caption"} color={"text.secondary"} noWrap title={data.name}>
                        {data.name}
                    </Typography>
                </Stack>
            </Stack>
        </Box>
    );
};

//Контроль свойств компонента - Атрибут сущности
Attribute.propTypes = {
    data: ATTRIBUTE_DATA_SHAPE
};

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

export { Attribute };