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 { BANNED_WORDS } from '../../../../constantes/constantes';

import './NotesEditor.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 (
 * <NotesEditor />
 * )
 */
const NotesEditor = (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);
        };
    };

    /**
     * Vérifie la conformité des mots entrés en commentaire avec le RGPD
     */        
    const checkRGPD = () => {
        /**
        * Convertit du texte en html en texte pour corriger les problèmes d'encoding
        */  
        const convertToPlain = (html) => {
            // Création d'un nouvel élément div
            var tempDivElement = document.createElement("div");
        
            // Enregistre le contenu html avec la valeur fournie
            tempDivElement.innerHTML = html;
            
            // Retrouve la propriété de texte d'un élément
            return tempDivElement.textContent || tempDivElement.innerText || "";
        };
        if (BANNED_WORDS.some(character => convertToPlain(value).includes(character))) {
            if (confirm('Votre commentaire contient des mots qui ne sont pas conformes au RGPD \n' +
             'Voulez-vous quand même poursuivre ?')) {
                return setValueAndCloseModal();
            };
        }
        else {
            return setValueAndCloseModal();
        }; 
    };

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

    return (
        <Modal className="NotesEditorModal" show={modalIsOpen} renderBackdrop={Backdrop} enforceFocus={false}>
            <div>
                <div className="ExitButton" onClick={checkRGPD}>
                    <RiCloseCircleFill />
                    <span>Fermer</span>
                </div>
                <div className="AlerteMots">
                    <BsExclamationDiamond size="60px" />
                    <span>
                        <strong>Point d’attention :</strong> Afin d'être en adéquation avec le règlement général sur la protection des données (RGPD),
                        veillez à <strong>ne pas renseigner de données à caractère personnel dans les notes</strong> (données santé, orientations
                        politiques, sexuelles, ethnies présumées...). Vous pouvez vous référer à la liste détaillée des informations à ne pas
                        renseigner dans le guide d'utilisation de l'application.
                    </span>
                </div>
                <Editor
                    tinymceScriptSrc='/tinymce/js/tinymce/tinymce.min.js'
                    onInit={(evt, editor) => (refInput.current = editor)}
                    initialValue={props.notes}
                    value={value}
                    onEditorChange={(newValue, editor) => setValue(newValue)}
                    init={{
                        height: '70vh',
                        width: '50vw',
                        resize: false,
                        menubar: false,
                        plugins: [
                            'advlist autolink lists link image charmap print preview anchor',
                            'searchreplace visualblocks code',
                            'insertdatetime media table paste code help wordcount'
                        ],
                        toolbar: 'undo redo | bold italic underline backcolor forecolor | bullist numlis | removeformat',
                        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 NotesEditor;
