import React, {ReactNode, useContext, useEffect, useRef, useState} from 'react';
import NoteIcon from "../../SVG/NoteIcon";
import ClearButton from "../../UI/ClearButton/ClearButton";
import authContext from "../../../context/auth-context";
import {updatePersonalNote} from "../../../API/user";
import {toastError, toastSuccess} from "../../../services/toaster";


type PersonalNoteProps = {
    children?: ReactNode
}

const PersonalNote = () => {

    const {currentUser} = useContext(authContext)
    const [noteContent, setNoteContent] = useState<string>(currentUser!.personalNote.text);
    const [isDirty, setIsDirty] = useState(false);

    const handleSaveNote = async (forceClear = false) => {


        if (isDirty || forceClear) {
            // Make an API call to update the note
            try {

                const res = await updatePersonalNote(forceClear ? "" : noteContent);
                toastSuccess('Η σημείωση αποθηκεύτηκε με επιτυχία.');
                setIsDirty(false); // Reset isDirty flag
                // const res =  await getPersonalNote();
                // setNoteContent(res.text);
            } catch (error) {
                toastError('Η σημείωση δεν αποθηέυθηκε. Προσπαθήστε ξανά.')
            }
        }
    };


    const handleNoteChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
        setNoteContent(e.target.value);
        setIsDirty(true
        );
    };

    const handleClear = async () => {
        setNoteContent("");
        await handleSaveNote(true)


    };

    return (
        <>
            <div className="quick-access-header">

                <NoteIcon
                    color={'#E3AC16'}/>
                <h3>My Notes</h3>
            </div>

            <div className={'note-area'}>
                           <textarea
                               onBlur={(e) => {
                                   if (e.relatedTarget?.id === "clear-btn") return
                                   handleSaveNote()
                               }}
                               title={'Η σημείωση αποθηκεύεται αυτόματα μετά από 5 δευτερόλεπτα αδράνειας'}
                               name={'text'}
                               placeholder={'Γράψτε εδώ μια σημείωση'}
                               value={noteContent}
                               onChange={handleNoteChange}
                           >
                            </textarea>
                {/*<ClearButton term={noteContent} clear={handleClear}/>*/}
            </div>
        </>
    )
        ;
}

export default PersonalNote;