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

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

import React, { useEffect, useState } from "react"; //Классы React
//import { BackEndСtx } from "../../../context/backend"; //Контекст взаимодействия с сервером
//import PropTypes from "prop-types"; //Контроль свойств компонента
import { Dialog, DialogTitle, IconButton, Icon, DialogContent, DialogActions, Button, TextField } 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]
    },
    DIALOG_CONTENT: { paddingTop: 0, paddingBottom: 0 }
};

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

//export const NoteDialogCtx = createContext();

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

//Диалоговое окно фильтра отбора
const useNoteDialog = () => {
    //Собственное состояние
    const [note, setNote] = useState();

    //Состояние отображения окна
    const [noteDialogOpen, setNoteDialogOpen] = useState(false);

    useEffect(() => {
        if (noteDialogOpen) console.log(`Сейчас: ${noteDialogOpen}`);
    }, [noteDialogOpen]);

    const handleNoteDialogChange = (value = null) => (value ? setNoteDialogOpen(value) : setNoteDialogOpen(!noteDialogOpen));

    const noteDialogRender = (onOk, onCancel) => {
        //При изменении примечания
        const handleNoteChange = value => setNote(value);

        //При закрытии диалога с изменением фильтра
        const handleOK = () => {
            setNoteDialogOpen(false);
            onOk(note);
            setNote();
        };

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

        //Генерация содержимого
        return (
            <div>
                {noteDialogOpen ? (
                    <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}>
                            <TextField
                                id="note"
                                label="Примечание"
                                variant="standard"
                                fullWidth
                                required
                                multiline
                                minRows={7}
                                maxRows={7}
                                value={note}
                                onChange={e => handleNoteChange(e.target.value)}
                            />
                        </DialogContent>
                        <DialogActions sx={STYLES.DIALOG_ACTIONS}>
                            <Button disabled={!note} variant="text" onClick={handleOK}>
                                ОК
                            </Button>
                            <Button variant="text" onClick={handleCancel}>
                                Отмена
                            </Button>
                        </DialogActions>
                    </Dialog>
                ) : null}
            </div>
        );
    };

    return [noteDialogRender, handleNoteDialogChange];
};

// const NoteDialog = (onOk, onCancel) => {
//     //const { noteDialogRender } = useContext(NoteDialogContext);
//     const noteDialogRender = useNoteDialog()[1];

//     //const [noteDialog] = useState();

//     // useEffect(() => {
//     //     setNoteDialog(noteDialogRender(onOk, onCancel));
//     // }, [noteDialogRender, onCancel, onOk]);

//     //const onCancel1 = () => console.log("Cancel");

//     return noteDialogRender(onOk, onCancel);
//     //const { Btn, handleChange } = useComp();

//     //return <Btn onOk={onOk} />;
// };

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

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

export { useNoteDialog };