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

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

import React from "react"; //Классы React
import PropTypes from "prop-types"; //Контроль свойств компонента
import { Draggable } from "react-beautiful-dnd";
import { Card, CardHeader, Typography, IconButton, Icon, Box, Menu, MenuItem } from "@mui/material"; //Интерфейсные компоненты
import { useTaskCard } from "../hooks"; //Вспомогательные хуки
import { TaskFormDialog } from "./task_form"; //Форма события

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

//Стили
const STYLES = {
    CONTAINER: { margin: "5px 0px", textAlign: "center" },
    MENU_ITEM_DELIMITER: { borderBottom: "1px solid lightgrey" },
    CARD_HEADER_TITLE: { padding: "2px" }
};

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

//Действия карточки события
const DataCellCardActions = ({ taskRn, menuItems, cardActions, handleMethodsMenuButtonClick, handleMethodsMenuClose, handleReload }) => {
    return (
        <Box sx={STYLES.BOX_ROW}>
            <IconButton id={`${taskRn}_menu_button`} aria-haspopup="true" onClick={handleMethodsMenuButtonClick}>
                <Icon>more_vert</Icon>
            </IconButton>
            <Menu id={`${taskRn}_menu`} anchorEl={cardActions.anchorMenuMethods} open={cardActions.openMethods} onClose={handleMethodsMenuClose}>
                {menuItems.map(action => {
                    return (
                        <MenuItem
                            sx={action.delimiter ? STYLES.MENU_ITEM_DELIMITER : {}}
                            key={`${taskRn}_${action.method}`}
                            onClick={() => {
                                //Выполняем действие
                                action.func(taskRn, action.needReload ? handleReload : null);
                                //Закрываем меню
                                handleMethodsMenuClose();
                            }}
                        >
                            <Icon>{action.icon}</Icon>
                            <Typography pl={1}>{action.name}</Typography>
                        </MenuItem>
                    );
                })}
            </Menu>
        </Box>
    );
};

//Контроль свойств - Действия карточки события
DataCellCardActions.propTypes = {
    taskRn: PropTypes.number.isRequired,
    menuItems: PropTypes.array.isRequired,
    cardActions: PropTypes.object.isRequired,
    handleMethodsMenuButtonClick: PropTypes.func.isRequired,
    handleMethodsMenuClose: PropTypes.func.isRequired,
    handleReload: PropTypes.func
};

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

//Карточка события
const TaskCard = ({ task, index, handleReload }) => {
    //Собственное состояние
    const [taskCard, setTaskCard, cardActions, handleMethodsMenuButtonClick, handleMethodsMenuClose, menuItems] = useTaskCard();

    //Генерация содержимого
    return (
        <Box>
            <Draggable draggableId={task.id.toString()} key={task.id} index={index}>
                {provided => (
                    <Card ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
                        <CardHeader
                            title={
                                <Typography className="task-info" sx={STYLES.CARD_HEADER_TITLE}>
                                    {task.id} {task.name}
                                </Typography>
                            }
                            sx={{ padding: 0 }}
                            action={
                                <DataCellCardActions
                                    taskRn={task.nrn}
                                    menuItems={menuItems}
                                    cardActions={cardActions}
                                    handleMethodsMenuButtonClick={handleMethodsMenuButtonClick}
                                    handleMethodsMenuClose={handleMethodsMenuClose}
                                    handleReload={handleReload}
                                />
                            }
                        />
                    </Card>
                )}
            </Draggable>
            {taskCard.openEdit ? (
                <TaskFormDialog
                    taskRn={task.nrn}
                    onClose={() => {
                        setTaskCard(pv => ({ ...pv, openEdit: false }));
                    }}
                />
            ) : null}
        </Box>
    );
};

//Контроль свойств - Карточка события
TaskCard.propTypes = {
    task: PropTypes.object.isRequired,
    index: PropTypes.number.isRequired,
    handleReload: PropTypes.func
};

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

export { TaskCard };