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

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

import React, { useState } from "react"; //Классы React
import PropTypes from "prop-types"; //Контроль свойств компонента
import {
    Dialog,
    DialogTitle,
    IconButton,
    Icon,
    DialogContent,
    DialogActions,
    Button,
    TextField,
    FormControl,
    InputLabel,
    Select,
    MenuItem
} from "@mui/material"; //Интерфейсные компоненты
import { APP_STYLES } from "../../../../app.styles"; //Типовые стили
import { arrayFormer } from "../hooks"; //Формировщик массива

//Стили
const STYLES = {
    DIALOG_ACTIONS: { justifyContent: "end", paddingRight: "24px", paddingLeft: "24px" },
    CLOSE_BUTTON: {
        position: "absolute",
        right: 8,
        top: 8,
        color: theme => theme.palette.grey[500]
    },
    DIALOG_CONTENT: { paddingTop: 0, paddingBottom: 0 },
    TEXT_FIELD: {
        overflowY: "auto",
        ...APP_STYLES.SCROLL
    }
};

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

const NoteDialog = ({ noteTypes, onOk, onCancel }) => {
    //Собственное состояние
    const [note, setNote] = useState({ headerV: 0, text: "" });

    //При изменении примечания
    const handleNoteChange = value => setNote(pv => ({ ...pv, text: value }));

    //При изменении заголовка примечания
    const handleNoteHeaderChange = h => {
        setNote(pv => ({ ...pv, headerV: h }));
    };

    //При закрытии диалога с изменением фильтра
    const handleOK = () => {
        //setNoteDialogOpen(false);
        onOk({ header: noteTypes[note.headerV], text: note.text });
        onCancel();
    };

    //При закрытии диалога без изменения фильтра
    const handleCancel = () => {
        onCancel();
    };

    //Генерация содержимого
    return (
        <Dialog open onClose={handleCancel} fullWidth maxWidth="sm">
            <DialogTitle>Примечание</DialogTitle>
            <IconButton aria-label="close" onClick={handleCancel} sx={STYLES.CLOSE_BUTTON}>
                <Icon>close</Icon>
            </IconButton>
            <DialogContent sx={STYLES.DIALOG_CONTENT}>
                <FormControl fullWidth variant="standard">
                    <InputLabel htmlFor="noteHeader">Заголовок примечания</InputLabel>
                    <Select
                        id="noteHeader"
                        name="noteHeader"
                        value={note.headerV}
                        aria-describedby="noteHeader-helper-text"
                        label="Заголовок примечания"
                        margin="dense"
                        onChange={e => handleNoteHeaderChange(e.target.value)}
                    >
                        {noteTypes
                            ? arrayFormer(noteTypes).map((item, i) => (
                                  <MenuItem key={i} value={i}>
                                      {item}
                                  </MenuItem>
                              ))
                            : null}
                    </Select>
                </FormControl>
                <TextField
                    id="note"
                    label="Описание"
                    variant="standard"
                    fullWidth
                    required
                    multiline
                    minRows={7}
                    maxRows={7}
                    value={note.text}
                    margin="normal"
                    inputProps={{ sx: STYLES.TEXT_FIELD }}
                    onChange={e => handleNoteChange(e.target.value)}
                />
            </DialogContent>
            <DialogActions sx={STYLES.DIALOG_ACTIONS}>
                <Button disabled={!note.text} variant="text" onClick={handleOK}>
                    ОК
                </Button>
                <Button variant="text" onClick={handleCancel}>
                    Отмена
                </Button>
            </DialogActions>
        </Dialog>
    );
};

//Контроль свойств - Диалоговое окно примечания
NoteDialog.propTypes = {
    noteTypes: PropTypes.array,
    onOk: PropTypes.func.isRequired,
    onCancel: PropTypes.func.isRequired
};

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

export { NoteDialog };