import React, {ReactNode, useRef} from 'react';
import PopupColumn from "./PopupColumn";
import note_icon from '../../../../assets/images/sticky-note.svg'

type NoteColumnProps = {
    children?: ReactNode,
    note: string,
    onSave: (note: string) => void
}

const NoteColumn = ({note, onSave}: NoteColumnProps) => {

    const noteRef = useRef()

    return (
        <PopupColumn disabled={!note}>
            <span>
                <img src={note_icon} alt=""/>
            </span>
            <span>
                <form onSubmit={(e) => {
                    e.preventDefault()
                    // @ts-ignore
                    const note = noteRef.current.value

                    onSave(note)


                }}>
                     {/*@ts-ignore*/}
                    <textarea name="" id="" placeholder={'Γράψτε εδώ...'} ref={noteRef} defaultValue={note || ''}>

                    </textarea>
                    <button type={'submit'}>
                        ΑΠΟΘΗΚΕΥΣΗ
                    </button>
                </form>
            </span>
        </PopupColumn>
    );
}

export default NoteColumn;