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

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

import React, { useState } from "react"; //Классы React
import PropTypes from "prop-types"; //Контроль свойств компонента
import { Dialog, DialogTitle, IconButton, Icon, DialogContent, DialogActions, Button, Box, MenuItem, Typography } from "@mui/material"; //Интерфейсные компоненты
import { CustomInputField } from "./custom_input_field.js"; //Кастомное поле ввода
import { COMMON_STYLES } from "../styles"; //Общие стили

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

//Стили
const STYLES = {
    BCKG_COLOR: backgroundColor => ({ backgroundColor: backgroundColor })
};

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

//Генерация элемента меню
const menuItemRender = ({ item, key }) => {
    //Генерация содержимого
    return (
        <MenuItem key={key} value={item.id} sx={STYLES.BCKG_COLOR(item.caption)}>
            <Typography variant="inherit" noWrap title={item.caption} component="div">
                {item.caption}
            </Typography>
        </MenuItem>
    );
};

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

//Диалог настройки карточки статуса
const StatusCardSettings = ({ statusColor, availableColors, onClose, onColorChange }) => {
    //Состояние индекса текущего цвета
    const [colorIndex, setColorIndex] = useState(availableColors.indexOf(statusColor));

    //При закрытии диалога с применением настройки статуса
    const handleDialogOk = () => {
        //Изменяем цвет статуса
        onColorChange(availableColors[colorIndex]);
        //Закрываем диалог
        onClose();
    };

    //При изменении значения элемента
    const handleSettingsItemChange = (item, value) => {
        setColorIndex(value);
    };

    //Генерация содержимого
    return (
        <div>
            <Dialog open onClose={onClose} fullWidth maxWidth="sm">
                <DialogTitle>Настройки</DialogTitle>
                <IconButton aria-label="close" onClick={onClose} sx={COMMON_STYLES.DIALOG_CLOSE_BUTTON}>
                    <Icon>close</Icon>
                </IconButton>
                <DialogContent>
                    <Box component="section" p={1}>
                        <CustomInputField
                            elementCode="color"
                            elementValue={colorIndex}
                            labelText="Цвет"
                            items={availableColors.reduce((prev, cur) => [...prev, { id: prev.length, caption: cur }], [])}
                            onChange={handleSettingsItemChange}
                            sx={STYLES.BCKG_COLOR(availableColors[colorIndex])}
                            menuItemRender={menuItemRender}
                        />
                    </Box>
                </DialogContent>
                <DialogActions sx={COMMON_STYLES.DIALOG_ACTIONS}>
                    <Button variant="text" onClick={handleDialogOk}>
                        Применить
                    </Button>
                    <Button variant="text" onClick={onClose}>
                        Отмена
                    </Button>
                </DialogActions>
            </Dialog>
        </div>
    );
};

//Контроль свойств - Диалог настройки карточки статуса
StatusCardSettings.propTypes = {
    statusColor: PropTypes.string.isRequired,
    availableColors: PropTypes.arrayOf(PropTypes.string).isRequired,
    onClose: PropTypes.func.isRequired,
    onColorChange: PropTypes.func.isRequired
};

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

export { StatusCardSettings };