/*
    Парус 8 - Панели мониторинга - РО - Редактор настройки регламентированного отчёта
    Компонент панели: Закладка раздела
*/

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

import React, { useState } from "react"; //Классы React
import PropTypes from "prop-types"; //Контроль свойств компонента
import { Tab, IconButton, Icon, Stack } from "@mui/material"; //Интерфейсные компоненты
import { STYLES as COMMON_STYLES } from "../common"; //Общие стили и константы

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

//Стили
const STYLES = {
    SECTION_TAB: { minWidth: "150px" },
    SECTION_TAB_LABEL: { width: "100%", height: "100%" },
    SECTION_TAB_TOOLBAR_STACK: { ...COMMON_STYLES.TOOLBAR, height: "100%", width: "100%" }
};

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

//Закладка раздела
const SectionTab = ({ value = false, section, sectionDesc, onSectionEdit, onSectionDelete, ...other }) => {
    //Флаг нахождения указателя мыши в закладке
    const [hoveredSection, setHoveredSection] = useState(false);

    //При попадании мыши на закладку раздела
    const handleSectionTabMouseIn = () => setHoveredSection(true);

    //При выходе мыши из закладки раздела
    const handleSectionTabMouseOut = () => setHoveredSection(false);

    //При редактировании раздела настройки
    const handleSectionEdit = () => onSectionEdit && onSectionEdit(sectionDesc.NRN);

    //При удалении раздела настройки
    const handleSectionDelete = () => onSectionDelete && onSectionDelete(sectionDesc.NRN);

    //Формирование представления
    return (
        <Tab
            component={"div"}
            wrapped
            value={value}
            onMouseEnter={handleSectionTabMouseIn}
            onMouseLeave={handleSectionTabMouseOut}
            sx={STYLES.SECTION_TAB}
            label={
                <Stack direction={"row"} alignItems={"center"} textAlign={"left"} sx={STYLES.SECTION_TAB_LABEL} title={sectionDesc.SNAME}>
                    {`${sectionDesc.SCODE} - ${sectionDesc.SNAME_SHORT}`}
                    {section === sectionDesc.NRN && hoveredSection && (
                        <Stack direction={"row"} alignItems={"center"} justifyContent={"right"} sx={STYLES.SECTION_TAB_TOOLBAR_STACK} p={1}>
                            <IconButton onClick={handleSectionEdit} title={"Редактировать раздел"}>
                                <Icon>edit</Icon>
                            </IconButton>
                            <IconButton disabled={sectionDesc.NDELETE_ALLOW === 0} onClick={handleSectionDelete} title={"Удалить раздел"}>
                                <Icon>delete</Icon>
                            </IconButton>
                        </Stack>
                    )}
                </Stack>
            }
            {...other}
        />
    );
};

//Контроль свойств - Закладка раздела
SectionTab.propTypes = {
    value: PropTypes.any,
    section: PropTypes.number,
    sectionDesc: PropTypes.object.isRequired,
    onSectionEdit: PropTypes.func,
    onSectionDelete: PropTypes.func
};

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

export { SectionTab };