/*
    Парус 8 - Панели мониторинга - УДП - Доски задач
    Панель мониторинга: Корневая панель доски задач
*/

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

import React, { useState } from "react"; //Классы React
import { DragDropContext, Droppable } from "react-beautiful-dnd"; //Работа с drag&drop
import { Stack, Card, CardHeader, CardContent, Box, Button, IconButton, Icon, Typography } from "@mui/material"; //Интерфейсные компоненты
import { TaskCard } from "./components/task_card"; //Компонент карточки события
import { TaskFormDialog } from "./components/task_form"; //Компонент формы события
import { Filter } from "./filter.js"; //Компонент фильтров
import { FilterDialog } from "./components/filter_dialog"; //Компонент диалогового окна фильтра отбора
import { TaskCardSettings } from "./components/task_card_settings.js"; //Компонент настроек карточки события
import { useTasks, useWindowResize, COLORS } from "./hooks.js"; //Вспомогательные хуки

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

//Стили
const STYLES = {
    CONTAINER: { width: "100%", padding: 1 },
    STATUS_BLOCK: statusColor => {
        return {
            maxWidth: "300px",
            minWidth: "300px",
            minHeight: "100px",
            backgroundColor: statusColor,
            padding: "8px"
        };
    },
    BLOCK_OPACITY: isAvailable => {
        return isAvailable ? { opacity: 1 } : { opacity: 0.5 };
    },
    MARK_INFO: {
        textAlign: "left",
        textOverflow: "ellipsis",
        overflow: "hidden",
        whiteSpace: "pre",
        maxWidth: "calc(250px)",
        width: "-webkit-fill-available"
    }
};

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

//Корневая панель доски задач
const ClntTaskBoard = () => {
    //Собственное состояние
    const [
        tasks,
        eventRoutes,
        docLinks,
        taskFormOpen,
        setTaskFormOpen,
        cardSettings,
        handleFilterOk,
        handleFilterCancel,
        handleFilterClick,
        handleCardSettingsClick,
        handleCardSettingsOk,
        handleCardSettingsCancel,
        handleReload,
        onDragEnd,
        handleOrderChanged
    ] = useTasks();

    //Состояние доступных маршрутов события
    const [availableRoutes, setAvailableRoutes] = useState({ sorce: "", routes: [] });

    //Состояние перетаскиваемого события
    const [dragItem, setDragItem] = useState({ type: "", status: "" });

    const clearDragItem = () => {
        setDragItem({ type: "", status: "" });
    };

    //Очистка состояния
    const clearARState = () => {
        setAvailableRoutes({ sorce: "", routes: [] });
    };

    //Проверка доступности карточки события
    const isCardAvailable = code => {
        return availableRoutes.sorce === code || availableRoutes.routes.find(r => r.dest === code) || !availableRoutes.sorce ? true : false;
    };

    //Состояние ширины и высоты рабочей области окна
    // eslint-disable-next-line no-unused-vars
    const [width, height] = useWindowResize();

    // useEffect(() => {
    //     console.log(`w: ${width}, h: ${height}`);
    // }, [width, height]);

    // useEffect(() => {
    //     console.log(availableRoutes);
    // }, [availableRoutes]);

    return (
        <Box sx={STYLES.CONTAINER}>
            {tasks.filters.isOpen ? (
                <FilterDialog initial={tasks.filters.values} docs={docLinks} onOk={handleFilterOk} onCancel={handleFilterCancel} />
            ) : null}
            <Filter
                filter={tasks.filters.values}
                selectedDoc={tasks.filters.values.docLink ? docLinks.find(d => d.id === tasks.filters.values.docLink) : null}
                handleFilterClick={handleFilterClick}
                handleReload={handleReload}
                orders={tasks.orders}
                handleOrderChanged={handleOrderChanged}
            />
            {tasks.filters.values.type ? (
                <DragDropContext
                    onDragStart={e => {
                        let srcCode = tasks.statuses.find(s => s.id == e.source.droppableId).code;
                        setAvailableRoutes({ sorce: srcCode, routes: [...eventRoutes.filter(r => r.src === srcCode)] });
                    }}
                    onDragEnd={e => {
                        onDragEnd(e);
                        clearARState();
                    }}
                >
                    <div>
                        <Droppable droppableId="Statuses" type="droppableTask">
                            {provided => (
                                <div ref={provided.innerRef}>
                                    <Stack direction="row" spacing={2}>
                                        {tasks.statuses.map((status, index) => (
                                            <div key={index}>
                                                <Droppable isDropDisabled={!isCardAvailable(status.code)} droppableId={status.id.toString()}>
                                                    {provided => (
                                                        <div ref={provided.innerRef}>
                                                            <Card
                                                                className="category-card"
                                                                sx={{
                                                                    ...STYLES.STATUS_BLOCK(status.color),
                                                                    ...STYLES.BLOCK_OPACITY(isCardAvailable(status.code))
                                                                }}
                                                            >
                                                                <CardHeader
                                                                    action={
                                                                        <IconButton
                                                                            aria-label="settings"
                                                                            onClick={() => handleCardSettingsClick(status)}
                                                                        >
                                                                            <Icon>more_vert</Icon>
                                                                        </IconButton>
                                                                    }
                                                                    title={
                                                                        <Typography sx={STYLES.MARK_INFO} title={status.caption} variant="h5">
                                                                            {status.caption}
                                                                        </Typography>
                                                                    }
                                                                    subheader={
                                                                        <Button
                                                                            onClick={() => {
                                                                                setDragItem({ type: tasks.filters.values.type, status: status.code });
                                                                                setTaskFormOpen(true);
                                                                            }}
                                                                        >
                                                                            + Добавить
                                                                        </Button>
                                                                    }
                                                                    sx={{ padding: 0 }}
                                                                />
                                                                <CardContent
                                                                    sx={{
                                                                        padding: 0,
                                                                        overflowY: "auto",
                                                                        maxHeight: height * 0.749
                                                                    }}
                                                                >
                                                                    <Stack spacing={1}>
                                                                        {tasks.rows
                                                                            .filter(item => item.category === status.id)
                                                                            .map((item, index) => (
                                                                                <TaskCard
                                                                                    task={item}
                                                                                    index={index}
                                                                                    handleReload={handleReload}
                                                                                    key={item.id}
                                                                                />
                                                                            ))}
                                                                        {provided.placeholder}
                                                                    </Stack>
                                                                </CardContent>
                                                            </Card>
                                                        </div>
                                                    )}
                                                </Droppable>
                                            </div>
                                        ))}
                                    </Stack>
                                    {provided.placeholder}
                                </div>
                            )}
                        </Droppable>
                    </div>
                </DragDropContext>
            ) : null}
            {taskFormOpen ? (
                <TaskFormDialog
                    taskType={dragItem.type}
                    taskStatus={dragItem.status}
                    onClose={() => {
                        setTaskFormOpen(false);
                        clearDragItem();
                    }}
                />
            ) : null}
            {cardSettings.isOpen ? (
                <TaskCardSettings
                    initial={cardSettings.settings}
                    availableClrs={COLORS}
                    onOk={handleCardSettingsOk}
                    onCancel={handleCardSettingsCancel}
                />
            ) : null}
        </Box>
    );
};

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

export { ClntTaskBoard };