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

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

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

//Стили
const STYLES = {
    DIALOG_CONTENT: { paddingTop: 0, paddingBottom: 0 }
};

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

//Диалог примечания
const NoteDialog = ({ noteTypes, onCallback, onClose }) => {
    //Собственное состояние
    const [note, setNote] = useState({ noteTypeIndex: 0, text: "" });

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

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

    //При закрытии диалога с изменением примечания
    const handleDialogOk = () => {
        //Передаем информацию о примечание в callback
        onCallback({ header: noteTypes[note.noteTypeIndex], text: note.text });
        onClose();
    };

    //Генерация содержимого
    return (
        <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 sx={STYLES.DIALOG_CONTENT}>
                <CustomInputField
                    elementCode="noteHeader"
                    elementValue={note.noteTypeIndex}
                    labelText="Заголовок примечания"
                    items={noteTypes.reduce((prev, cur) => [...prev, { id: prev.length, caption: cur }], [])}
                    onChange={handleNoteHeaderChange}
                    margin="dense"
                />
                <TextField
                    id="note"
                    label="Описание"
                    variant="standard"
                    fullWidth
                    required
                    multiline
                    minRows={7}
                    maxRows={7}
                    value={note.text}
                    margin="normal"
                    inputProps={{ sx: COMMON_STYLES.SCROLL }}
                    onChange={e => handleNoteChange(e.target.value)}
                />
            </DialogContent>
            <DialogActions sx={COMMON_STYLES.DIALOG_ACTIONS}>
                <Button disabled={!note.text} variant="text" onClick={handleDialogOk}>
                    ОК
                </Button>
                <Button variant="text" onClick={onClose}>
                    Отмена
                </Button>
            </DialogActions>
        </Dialog>
    );
};

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

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

export { NoteDialog };