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

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

import React, { useState } from "react"; //Классы React
import PropTypes from "prop-types"; //Контроль свойств компонента
import {
    Dialog,
    DialogTitle,
    IconButton,
    Icon,
    DialogContent,
    DialogActions,
    Button,
    Box,
    FormControl,
    InputLabel,
    Select,
    MenuItem
} from "@mui/material"; //Интерфейсные компоненты

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

//Стили
const STYLES = {
    DIALOG_ACTIONS: { justifyContent: "end", paddingRight: "24px", paddingLeft: "24px" },
    CLOSE_BUTTON: {
        position: "absolute",
        right: 8,
        top: 8,
        color: theme => theme.palette.grey[500]
    },
    BCKG_COLOR: backgroundColor => ({ backgroundColor: backgroundColor })
};

//---------------
//Тело компонента
//---------------

//Диалог настройки карточки событий
const TaskCardSettings = ({ statuses, availableClrs, onDialogOpen }) => {
    //Собственное состояние
    const [settings, setSettings] = useState({});

    //Применение настройки статуса
    const handleOk = settings => {
        //Считываем статусы
        let cloneS = statuses.slice();
        //Изменяем статус у выбранного
        cloneS[statuses.findIndex(x => x.id === settings.id)] = { ...settings };
        setSettings(cloneS);
        onDialogOpen();
    };

    //При изменении значения элемента
    const handleSettingsItemChange = e => {
        setSettings(pv => ({ ...pv, color: e.target.value }));
    };

    //Генерация содержимого
    return (
        <div>
            <Dialog open onClose={onDialogOpen} fullWidth maxWidth="sm">
                <DialogTitle>Настройки</DialogTitle>
                <IconButton aria-label="close" onClick={onDialogOpen} sx={STYLES.CLOSE_BUTTON}>
                    <Icon>close</Icon>
                </IconButton>
                <DialogContent>
                    <Box component="section" p={1}>
                        <FormControl fullWidth>
                            <InputLabel id="color-label">Цвет</InputLabel>
                            <Select
                                defaultValue={settings.color}
                                labelId="color-label"
                                id="color"
                                label="Цвет"
                                variant="standard"
                                sx={STYLES.BCKG_COLOR(settings.color)}
                                onChange={handleSettingsItemChange}
                            >
                                <MenuItem key={0} value={settings.color} sx={STYLES.BCKG_COLOR(settings.color)}>
                                    {settings.color}
                                </MenuItem>
                                {availableClrs.map((clr, i) => {
                                    return (
                                        <MenuItem key={i + 1} value={clr} sx={STYLES.BCKG_COLOR(clr)}>
                                            {clr}
                                        </MenuItem>
                                    );
                                })}
                            </Select>
                        </FormControl>
                    </Box>
                </DialogContent>
                <DialogActions sx={STYLES.DIALOG_ACTIONS}>
                    <Button variant="text" onClick={handleOk}>
                        Применить
                    </Button>
                    <Button variant="text" onClick={onDialogOpen}>
                        Отмена
                    </Button>
                </DialogActions>
            </Dialog>
        </div>
    );
};

//Контроль свойств - Диалог настройки карточки событий
TaskCardSettings.propTypes = {
    statuses: PropTypes.arrayOf(PropTypes.object).isRequired,
    availableClrs: PropTypes.arrayOf(PropTypes.string).isRequired,
    onDialogOpen: PropTypes.func.isRequired
};

//--------------------
//Интерфейс компонента
//--------------------

export { TaskCardSettings };