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

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

import React, { useState } from "react"; //Классы React
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
import { Stack, Card, CardHeader, CardContent, Typography, Box, Button, IconButton, Icon } from "@mui/material"; //Интерфейсные компоненты
//import { Draggable } from "react-draggable";

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

const STYLES = {
    CONTAINER: { width: "100%", padding: 1 },
    DEF_SIZE: { minWidth: "200px", minHeight: "100px" },
    SETTINGS_BUTTON: {
        position: "absolute",
        right: 8,
        top: 8,
        color: theme => theme.palette.grey[500]
    }
};

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

//Корневая панель доски задач
const ClntTaskBoard = () => {
    const [categories, setCategories] = useState([
        { id: 1, name: "Новое" },
        { id: 2, name: "Старое" }
    ]);
    const [tasks, setTasks] = useState([
        { id: 1, name: "Задание1", category: 1 },
        { id: 2, name: "Задание2", category: 1 },
        { id: 3, name: "Задание3", category: 2 },
        { id: 4, name: "Задание4", category: 2 }
    ]);

    const onDragEnd = result => {
        const { source, destination } = result;

        if (!destination) {
            return;
        }

        if (destination.droppableId === "Categories") {
            setCategories(categories);
        } else if (destination.droppableId !== source.droppableId) {
            setTasks(tasks =>
                tasks.map(task =>
                    task.id === parseInt(result.draggableId)
                        ? {
                              ...task,
                              category: parseInt(result.destination.droppableId)
                          }
                        : task
                )
            );
        } else {
            setTasks(tasks);
        }
    };

    return (
        <Box sx={STYLES.CONTAINER}>
            <DragDropContext onDragEnd={onDragEnd}>
                <div>
                    <Droppable droppableId="Categories" type="droppableTask">
                        {provided => (
                            <div ref={provided.innerRef}>
                                <Stack direction="row" spacing={2}>
                                    {categories.map((category, index) => (
                                        <div key={index}>
                                            <Droppable droppableId={category.id.toString()}>
                                                {provided => (
                                                    <div ref={provided.innerRef}>
                                                        <Card
                                                            className="category-card"
                                                            sx={{ ...STYLES.DEF_SIZE, backgroundColor: "#FFA500", padding: 1 }}
                                                        >
                                                            <CardHeader
                                                                action={
                                                                    <IconButton
                                                                        aria-label="settings"
                                                                        onClick={() => {
                                                                            console.log("Опции типа");
                                                                        }}
                                                                    >
                                                                        <Icon>more_vert</Icon>
                                                                    </IconButton>
                                                                }
                                                                title={category.name}
                                                                subheader={
                                                                    <Button onClick={() => console.log("Добавление события")}>+ Добавить</Button>
                                                                }
                                                                sx={{ padding: 0 }}
                                                            />
                                                            <CardContent sx={{ padding: 0 }}>
                                                                <Stack spacing={1}>
                                                                    {tasks
                                                                        .filter(item => item.category === category.id)
                                                                        .map((item, index) => (
                                                                            <Draggable draggableId={item.id.toString()} key={item.id} index={index}>
                                                                                {provided => (
                                                                                    <Card
                                                                                        ref={provided.innerRef}
                                                                                        {...provided.draggableProps}
                                                                                        {...provided.dragHandleProps}
                                                                                    >
                                                                                        <CardHeader
                                                                                            action={
                                                                                                <IconButton
                                                                                                    aria-label="settings"
                                                                                                    onClick={() => {
                                                                                                        console.log("Опции задачи");
                                                                                                    }}
                                                                                                >
                                                                                                    <Icon>more_vert</Icon>
                                                                                                </IconButton>
                                                                                            }
                                                                                            title={
                                                                                                <Typography
                                                                                                    className="task-info"
                                                                                                    sx={{ padding: "2px" }}
                                                                                                >
                                                                                                    {item.id} {item.name}
                                                                                                </Typography>
                                                                                            }
                                                                                            sx={{ padding: 0 }}
                                                                                        />
                                                                                    </Card>
                                                                                )}
                                                                            </Draggable>
                                                                        ))}
                                                                    {provided.placeholder}
                                                                </Stack>
                                                            </CardContent>
                                                        </Card>
                                                    </div>
                                                )}
                                            </Droppable>
                                        </div>
                                    ))}
                                </Stack>
                                {provided.placeholder}
                            </div>
                        )}
                    </Droppable>
                </div>
            </DragDropContext>
        </Box>
    );
};

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

export { ClntTaskBoard };