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

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

import React, { useEffect, useState, useRef } from "react"; //Классы React
import PropTypes from "prop-types"; //Контроль свойств компонента
import { Box, Typography, Link, IconButton, Icon } from "@mui/material"; //Интерфейсные компоненты
import { P8PAppInlineError } from "./p8p_app_message"; //Встраиваемое сообщение об ошибке
import { useP8PCyclogram } from "./p8p_cyclogram_hooks"; //Хук для циклограммы
import { P8PCyclogramTaskEditor } from "./p8p_cyclogram/p8p_cyclogram_task_editor"; //Редактор задачи
import { P8P_TYPOGRAPHY_VARIANT } from "../theme/p8p_typography"; //Варианты шрифтов
import { P8P_COMPONENT_HEIGHT } from "../theme/styles/common"; //Стили - общие
import { P8P_BOX_CYCLOGRAM } from "../theme/styles/box"; //Стили контейнеров
import { getShift } from "./p8p_cyclogram/p8p_cyclogram_utils"; //Вспомогательные функции циклограммы
import {
    P8P_CYCLOGRAM_ZOOM,
    NDEFAULT_LINE_HEIGHT,
    NDEFAULT_HEADER_HEIGHT,
    TITLE_HEIGHT,
    ZOOM_HEIGHT,
    P8P_CYCLOGRAM_COLUMN_SHAPE,
    P8P_CYCLOGRAM_GROUP_SHAPE,
    P8P_CYCLOGRAM_TASK_SHAPE,
    P8P_CYCLOGRAM_TASK_ATTRIBUTE_SHAPE
} from "./p8p_cyclogram/p8p_cyclogram_constants"; //Константы циклограммы
import { P8PCyclogramGrid } from "./p8p_cyclogram/p8p_cyclogram_grid"; //Фон таблицы циклограммы
import { P8PCyclogramView } from "./p8p_cyclogram/p8p_cyclogram_view"; //Представление циклограммы
import { P8P_TYPOGRAPHY_TITLE } from "../theme/styles/typography"; //Стили текста

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

//Циклограмма
const P8PCyclogram = ({
    containerStyle,
    lineHeight,
    title,
    titleStyle,
    onTitleClick,
    zoomBar,
    zoom,
    columns,
    columnRenderer,
    groups,
    groupHeaderRenderer,
    tasks,
    taskRenderer,
    taskAttributes,
    taskAttributeRenderer,
    taskDialogRenderer,
    noDataFoundText,
    nameTaskEditorCaption,
    okTaskEditorBtnCaption,
    cancelTaskEditorBtnCaption
}) => {
    //Хук основного блока (для последующего определения доступной ширины)
    const mainBlock = useRef(null);
    //Хук для заголовка таблицы
    const headerBlock = useRef(null);
    //Собственное состояние
    const [state, setState] = useState({
        noData: true,
        loaded: false,
        lineHeight: NDEFAULT_LINE_HEIGHT,
        maxWidth: 0,
        maxHeight: 0,
        shift: 0,
        zoom: P8P_CYCLOGRAM_ZOOM.includes(zoom) ? zoom : 1,
        tasks: [],
        editTask: null
    });

    //Обновление масштаба циклограммы
    const handleZoomChange = direction => {
        //Считываем текущий индекс
        const currentIndex = P8P_CYCLOGRAM_ZOOM.indexOf(state.zoom);
        setState(pv => ({
            ...pv,
            zoom:
                currentIndex + direction !== P8P_CYCLOGRAM_ZOOM.length && currentIndex + direction !== -1
                    ? P8P_CYCLOGRAM_ZOOM[currentIndex + direction]
                    : pv.zoom
        }));
    };

    //Открытие редактора задачи
    const openTaskEditor = task => setState(pv => ({ ...pv, editTask: { ...task } }));

    //При сохранении задачи в редакторе
    const handleTaskEditorSave = () => {
        setState(pv => ({ ...pv, editTask: null }));
    };

    //При закрытии редактора задачи без сохранения
    const handleTaskEditorCancel = () => setState(pv => ({ ...pv, editTask: null }));

    //При скролле блока
    const handleScroll = e => {
        //Изменяем позицию заголовка таблицы относительно скролла
        headerBlock.current.setAttribute("transform", "translate(0," + e.currentTarget.scrollTop + ")");
    };

    //При изменении данных
    useEffect(() => {
        //Если есть колонки и задачи
        if (Array.isArray(columns) && columns.length > 0 && Array.isArray(tasks) && tasks.length > 0) {
            //Определяем текущую максимальную ширину колонок
            let currentColumnsMaxWidth = Math.max(...columns.map(o => o.end));
            //Определяем доступный сдвиг для ширины колонок (16 - паддинг по бокам)
            let columnShift = getShift(columns, currentColumnsMaxWidth, mainBlock.current.offsetWidth - 16) * state.zoom;
            //Устанавливаем значения исходя из колонок/задач
            setState(pv => ({
                ...pv,
                loaded: true,
                lineHeight: lineHeight ? lineHeight : NDEFAULT_LINE_HEIGHT,
                maxWidth: columnShift !== 0 ? currentColumnsMaxWidth * columnShift : currentColumnsMaxWidth,
                maxHeight: NDEFAULT_HEADER_HEIGHT + (Math.max(...tasks.map(o => o.lineNumb)) + 1) * (lineHeight ? lineHeight : NDEFAULT_LINE_HEIGHT),
                shift: columnShift,
                tasks: tasks,
                noData: false
            }));
        } else {
            //Устанавливаем значения исходя из колонок/задач
            setState(pv => ({
                ...pv,
                noData: true
            }));
        }
    }, [columns, lineHeight, state.zoom, tasks]);

    //Генерация содержимого
    return (
        <>
            <div ref={mainBlock} style={{ ...(containerStyle ? containerStyle : {}) }}>
                {state.noData ? <P8PAppInlineError text={noDataFoundText} /> : null}
                {state.loaded ? (
                    <>
                        {title ? (
                            <Typography
                                p={1}
                                sx={{ ...P8P_TYPOGRAPHY_TITLE, ...(titleStyle ? titleStyle : {}) }}
                                align="center"
                                color="textSecondary"
                                variant={P8P_TYPOGRAPHY_VARIANT.TITLE}
                                component="h6"
                            >
                                {onTitleClick ? (
                                    <Link component="button" variant={P8P_TYPOGRAPHY_VARIANT.BODY3} underline="hover" onClick={() => onTitleClick()}>
                                        {title}
                                    </Link>
                                ) : (
                                    title
                                )}
                            </Typography>
                        ) : null}
                        {zoomBar ? (
                            <Box p={1} sx={P8P_COMPONENT_HEIGHT({ height: ZOOM_HEIGHT })}>
                                <IconButton
                                    onClick={() => handleZoomChange(1)}
                                    disabled={state.zoom == P8P_CYCLOGRAM_ZOOM[P8P_CYCLOGRAM_ZOOM.length - 1]}
                                >
                                    <Icon>zoom_in</Icon>
                                </IconButton>
                                <IconButton onClick={() => handleZoomChange(-1)} disabled={state.zoom == P8P_CYCLOGRAM_ZOOM[0]}>
                                    <Icon>zoom_out</Icon>
                                </IconButton>
                            </Box>
                        ) : null}
                        <Box
                            className="scroll"
                            //sx={STYLES.CYCLOGRAM_BOX(state.noData, title, zoomBar)}
                            sx={P8P_BOX_CYCLOGRAM({
                                noData: state.noData,
                                zoomBarHeight: zoomBar ? ZOOM_HEIGHT : null,
                                titleHeight: title ? TITLE_HEIGHT : null
                            })}
                            onScroll={handleScroll}
                        >
                            <svg id="cyclogram" width={state.maxWidth} height={state.maxHeight}>
                                <P8PCyclogramGrid
                                    tasks={state.tasks}
                                    columns={columns}
                                    shift={state.shift}
                                    maxWidth={state.maxWidth}
                                    maxHeight={state.maxHeight}
                                    lineHeight={state.lineHeight}
                                />
                                <P8PCyclogramView
                                    columns={columns}
                                    groups={groups}
                                    tasks={state.tasks}
                                    shift={state.shift}
                                    lineHeight={state.lineHeight}
                                    maxWidth={state.maxWidth}
                                    maxHeight={state.maxHeight}
                                    groupHeaderRenderer={groupHeaderRenderer}
                                    openTaskEditor={openTaskEditor}
                                    taskRenderer={taskRenderer}
                                    columnRenderer={columnRenderer}
                                    headerBlock={headerBlock}
                                />
                            </svg>
                        </Box>
                    </>
                ) : null}
                {state.editTask ? (
                    <P8PCyclogramTaskEditor
                        task={state.editTask}
                        taskAttributes={taskAttributes}
                        onOk={handleTaskEditorSave}
                        onCancel={handleTaskEditorCancel}
                        taskAttributeRenderer={taskAttributeRenderer}
                        taskDialogRenderer={taskDialogRenderer}
                        nameCaption={nameTaskEditorCaption}
                        okBtnCaption={okTaskEditorBtnCaption}
                        cancelBtnCaption={cancelTaskEditorBtnCaption}
                    />
                ) : null}
            </div>
        </>
    );
};

//Контроль свойств - Циклограмма
P8PCyclogram.propTypes = {
    containerStyle: PropTypes.object,
    lineHeight: PropTypes.number,
    title: PropTypes.string,
    titleStyle: PropTypes.object,
    onTitleClick: PropTypes.func,
    zoomBar: PropTypes.bool,
    zoom: PropTypes.number,
    columns: PropTypes.arrayOf(P8P_CYCLOGRAM_COLUMN_SHAPE).isRequired,
    columnRenderer: PropTypes.func,
    groups: PropTypes.arrayOf(P8P_CYCLOGRAM_GROUP_SHAPE),
    groupHeaderRenderer: PropTypes.func,
    tasks: PropTypes.arrayOf(P8P_CYCLOGRAM_TASK_SHAPE).isRequired,
    taskRenderer: PropTypes.func,
    taskAttributes: PropTypes.arrayOf(P8P_CYCLOGRAM_TASK_ATTRIBUTE_SHAPE),
    taskAttributeRenderer: PropTypes.func,
    taskDialogRenderer: PropTypes.func,
    noDataFoundText: PropTypes.string.isRequired,
    nameTaskEditorCaption: PropTypes.string.isRequired,
    okTaskEditorBtnCaption: PropTypes.string.isRequired,
    cancelTaskEditorBtnCaption: PropTypes.string.isRequired
};

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

export { P8PCyclogram, useP8PCyclogram };