/*
    Парус 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 = ({ initial, availableClrs, onCancel, onOk }) => {
    //Собственное состояние
    const [settings, setSettings] = useState({ ...initial });

    //При закрытии диалога без изменений
    const handleCancel = () => (onCancel ? onCancel() : null);

    //При закрытии диалога с изменениями
    const handleOK = () => (onOk ? onOk(settings) : null);

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

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

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

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

export { TaskCardSettings };