/*
    Парус 8 - Панели мониторинга - Примеры для разработчиков
    Пример: Циклограмма "P8PCyclogram"
*/

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

import React, { useState, useContext, useCallback, useEffect } from "react"; //Классы React
import PropTypes from "prop-types"; //Контроль свойств компонента
import {
    Typography,
    Grid,
    Button,
    Box,
    DialogContent,
    List,
    ListItem,
    ListItemText,
    Divider,
    TextField,
    DialogActions,
    Stack,
    Icon
} from "@mui/material"; //Интерфейсные элементы
import { formatDateRF, hasValue } from "../../core/utils"; //Вспомогательные функции
import { APP_BAR_HEIGHT } from "../../components/p8p_app_workspace"; //Заголовок страницы
import { P8PCyclogram, useP8PCyclogram } from "../../components/p8p_cyclogram"; //Циклограмма
import { P8P_CYCLOGRAM_CONFIG_PROPS } from "../../config_wrapper"; //Подключение компонентов к настройкам приложения
import { BackEndСtx } from "../../context/backend"; //Контекст взаимодействия с сервером

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

//Отступ контейнера страницы от заголовка
const CONTAINER_PADDING_TOP = "20px";

//Высота заголовка страницы
const TITLE_HEIGHT = "47px";

//Высота строк
const LINE_HEIGHT = 30;

//Стили
const STYLES = {
    CONTAINER: { textAlign: "center", paddingTop: CONTAINER_PADDING_TOP },
    TITLE: { paddingBottom: "15px", height: TITLE_HEIGHT },
    CYCLOGRAM_CONTAINER: {
        height: `calc(100vh - ${APP_BAR_HEIGHT} - ${TITLE_HEIGHT} - ${CONTAINER_PADDING_TOP})`,
        width: "100vw",
        paddingTop: "5px"
    },
    TASK_EDITOR_CONTENT: { minWidth: 400, overflowX: "auto" },
    TASK_EDITOR_LIST: { width: "100%", minWidth: 300, maxWidth: 700, bgcolor: "background.paper" },
    GROUP_HEADER: height => ({
        border: "1px solid",
        backgroundColor: "#ecf8fb",
        height: height,
        borderRadius: "10px",
        display: "flex",
        alignItems: "center",
        justifyContent: "space-around"
    })
};

//---------------------------------------------
//Вспомогательные функции форматирования данных
//---------------------------------------------

//Диалог открытия задачи
const CustomTaskDialog = ({ task, ident, onReload, close }) => {
    //Собственное состояние
    const [taskDates, setTaskDates] = useState({ start: task.ddate_start, end: task.ddate_end });

    //Тип проекта
    const textType = task.type === 0 ? "Задачи проекта" : task.type === 1 ? "Этап проекта" : "Работа проекта";

    //Подключение к контексту взаимодействия с сервером
    const { executeStored } = useContext(BackEndСtx);

    //При необходимости перезагрузить данные
    const handleReload = useCallback(() => onReload && onReload(), [onReload]);

    //Изменение дат задачи
    const changeDates = useCallback(async () => {
        //Изменяем даты задачи
        await executeStored({
            stored: "PKG_P8PANELS_SAMPLES.CYCLOGRAM_TASK_MODIFY",
            args: {
                NIDENT: ident,
                NRN: task.rn,
                SDATE_FROM: formatDateRF(taskDates.start),
                SDATE_TO: formatDateRF(taskDates.end)
            }
        });
        handleReload();
        close();
    }, [close, executeStored, handleReload, ident, task.rn, taskDates.end, taskDates.start]);

    //При нажатии OK
    const handleOk = () => {
        //Изменяем даты задачи
        changeDates();
    };

    return (
        <>
            <DialogContent sx={STYLES.TASK_EDITOR_CONTENT}>
                <List sx={STYLES.TASK_EDITOR_LIST}>
                    <ListItem alignItems="flex-start">
                        <ListItemText primary={"Наименование"} secondary={task.fullName} />
                    </ListItem>
                    <Divider component="li" />
                    <ListItem alignItems="flex-start">
                        <ListItemText
                            secondaryTypographyProps={{ component: "span" }}
                            primary={"Начало"}
                            secondary={
                                <TextField
                                    error={!taskDates.start}
                                    disabled={task.type !== 2}
                                    name="start"
                                    fullWidth
                                    required
                                    InputLabelProps={{ shrink: true }}
                                    type={"date"}
                                    value={taskDates.start}
                                    onChange={e => setTaskDates(pv => ({ ...pv, start: e.target.value }))}
                                    variant="standard"
                                    size="small"
                                    margin="normal"
                                ></TextField>
                            }
                        />
                    </ListItem>
                    <Divider component="li" />
                    <ListItem alignItems="flex-start">
                        <ListItemText
                            secondaryTypographyProps={{ component: "span" }}
                            primary={"Окончание"}
                            secondary={
                                <TextField
                                    error={!taskDates.end}
                                    disabled={task.type !== 2}
                                    name="end"
                                    fullWidth
                                    required
                                    InputLabelProps={{ shrink: true }}
                                    type={"date"}
                                    value={taskDates.end}
                                    onChange={e => setTaskDates(pv => ({ ...pv, end: e.target.value }))}
                                    variant="standard"
                                    size="small"
                                    margin="normal"
                                ></TextField>
                            }
                        />
                    </ListItem>
                    <Divider component="li" />
                    <ListItem alignItems="flex-start">
                        <ListItemText
                            primary={"Тип"}
                            secondaryTypographyProps={{ component: "span" }}
                            secondary={
                                <Stack direction="row" gap={0.5}>
                                    <Icon title={textType}>{task.type === 0 ? "description" : task.type === 1 ? "check" : "work_outline"}</Icon>
                                    {textType}
                                </Stack>
                            }
                        />
                    </ListItem>
                </List>
            </DialogContent>
            <DialogActions>
                <Button onClick={handleOk}>ОК</Button>
                <Button onClick={close}>Отмена</Button>
            </DialogActions>
        </>
    );
};

//Контроль свойств - Диалог открытия задачи
CustomTaskDialog.propTypes = {
    task: PropTypes.object.isRequired,
    ident: PropTypes.number.isRequired,
    onReload: PropTypes.func.isRequired,
    close: PropTypes.func.isRequired
};

//Заголовок группы
const CustomGroupHeader = ({ group }) => {
    return (
        <Box sx={STYLES.GROUP_HEADER(group.height)}>
            <Typography variant="body2">{group.name}</Typography>
        </Box>
    );
};

//Контроль свойств - Заголовок группы
CustomGroupHeader.propTypes = {
    group: PropTypes.object.isRequired
};

//Отображение задачи
const taskRenderer = ({ task }) => {
    //Если это задачи проекта
    if (task.type === 0) {
        return {
            taskStyle: { border: "3px solid #ebe058" }
        };
    }
};

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

//Пример: Циклограмма "P8PCyclogram"
const Cyclogram = ({ title }) => {
    //Собственное состояние - идентификатор данных
    const [dataIdent, setDataIdent] = useState(null);

    //Собственное состояние
    const { cyclogram, isDataLoaded, doReload } = useP8PCyclogram({
        stored: "PKG_P8PANELS_SAMPLES.CYCLOGRAM",
        storedArgs: { NIDENT: dataIdent },
        allowDataLoad: () => hasValue(dataIdent)
    });

    //Подключение к контексту взаимодействия с сервером
    const { executeStored } = useContext(BackEndСtx);

    //При подключении компонента к странице
    useEffect(() => {
        //Инициализация данных циклограммы
        const initCyclogram = async () => {
            const data = await executeStored({ stored: "PKG_P8PANELS_SAMPLES.CYCLOGRAM_INIT", args: { NIDENT: null } });
            setDataIdent(data.NIDENT);
        };
        //Инициализируем данные циклограммы
        initCyclogram();
    }, [executeStored]);

    return (
        <Box>
            <div style={STYLES.CONTAINER}>
                <Typography sx={STYLES.TITLE} variant={"h6"}>
                    {title}
                </Typography>
                <Grid container direction="column" alignItems="center">
                    <Grid item xs={12}>
                        {isDataLoaded ? (
                            <P8PCyclogram
                                {...P8P_CYCLOGRAM_CONFIG_PROPS}
                                {...cyclogram}
                                containerStyle={STYLES.CYCLOGRAM_CONTAINER}
                                lineHeight={LINE_HEIGHT}
                                taskDialogRenderer={prms => (
                                    <CustomTaskDialog task={prms.task} ident={dataIdent} onReload={doReload} close={prms.close} />
                                )}
                                taskRenderer={prms => taskRenderer(prms)}
                                groupHeaderRenderer={prms => <CustomGroupHeader group={prms.group} />}
                            />
                        ) : null}
                    </Grid>
                </Grid>
            </div>
        </Box>
    );
};

//Контроль свойств - Пример: Циклограмма "P8PCyclogram"
Cyclogram.propTypes = {
    title: PropTypes.string.isRequired
};

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

export { Cyclogram };