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
    title?:string
    flex?: string
    hasAppend?: boolean
    label?:string


}

const NoteColumn = ({note,onSave, label,title, flex, hasAppend=false}: NoteColumnProps) => {

    const noteRef = useRef()

    return (
        <PopupColumn  label={label} flex={flex} empty={!note} className={ "column-border"}>
            <span title={title}>
                <img src={note_icon} alt=""/>
            </span>
            <span>
                <form onSubmit={(e) => {
                    e.preventDefault()
                    // @ts-ignore
                    const note = noteRef.current.value

                    onSave(note)


                }}>
                     {/*@ts-ignore*/}
                    <textarea className={(hasAppend && note!=="") && "readonly"} readOnly={hasAppend && note!==""} name="" id="" placeholder={'Γράψτε εδώ...'} ref={noteRef} defaultValue={note || ''}>

                    </textarea>

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

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

export default NoteColumn;