import React, { useEffect, useRef, useState } from 'react';
import { Modal } from 'react-overlays';
import { BsExclamationDiamond, RiCloseCircleFill } from 'react-icons/all';
import { Editor } from '@tinymce/tinymce-react';

import './NotesViewer.scss';

/**
 * Composant d'édition d'une note (texte riche).
 *
 * @component
 * @param {string} props.notes - Les notes à afficher/modifier
 * @param {void} props.setNotes - Setter pour modifier la valeur des notes dans une cellule Ag Grid
 * @param {object} props.AGGridApi - Api d'Ag Grid pour arrêter l'édition
 * @param {boolean} props.isOpen - Permet de savoir si l'éditeur est ouvert ou fermé
 * @param {void} props.setIsOpen - Permet d'ouvrir ou fermer l'éditeur
 * @example
 * return (
 * <NotesViewer />
 * )
 */
const NotesViewer = (props) => {
    const [value, setValue] = useState(props.notes);
    const [modalIsOpen, setModalIsOpen] = useState(props.isOpen);
    const refInput = useRef(null);

    useEffect(() => setValue(props.notes ?? ''), [props.notes]);

    useEffect(() => {
        if (!props.AGGridApi) {
            setModalIsOpen(props.isOpen);
        }
    }, [props.isOpen]);

    /**
     * Ferme la modale et met à jour la valeur.
     */
    const setValueAndCloseModal = () => {
        props.setNotes(value);

        if (props.AGGridApi) {
            setTimeout(() => {
                props.AGGridApi.stopEditing();
            });
        }

        setModalIsOpen(false);
        if (props.setIsOpen) {
            props.setIsOpen(false);
        }
    };

    const Backdrop = () => {
        return <div className="Backdrop" onClick={setValueAndCloseModal} />;
    };

    return (
        <Modal className="NotesEditorModal" show={modalIsOpen} renderBackdrop={Backdrop} enforceFocus={false}>
            <div>
                <div className="ExitButton" onClick={setValueAndCloseModal}>
                    <RiCloseCircleFill />
                    <span>Fermer</span>
                </div>
                <Editor
                    tinymceScriptSrc='/tinymce/js/tinymce/tinymce.min.js'
                    disabled={true}
                    onInit={(evt, editor) => (refInput.current = editor)}
                    initialValue={props.notes}
                    value={value}
                    menubar={false}
                    init={{
                        height: '70vh',
                        width: '50vw',
                        resize: false,
                        menubar: false,
                        content_style:
                            "body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif; font-size:13px }",
                        setup: (editor) => {
                            editor.on('init', function (e) {
                                editor.execCommand('mceFocus');
                            });
                        }
                    }}
                />
            </div>
        </Modal>
    );
};

export default NotesViewer;
