import styles from '../styles/Notes.module.scss'
import React from 'react'
import usePopup from 'hooks/usePopup'
import useSettings from 'hooks/useSettings'
import useNotes from '../hooks/useNotes'
import { addNote, updateNote } from '../helpers/noteActions.js'

const NoteEdit = ({ setAction, fetchedNote }) => {
  const { t } = useSettings()
  const { setPopup } = usePopup()
  const { mutateNotes } = useNotes()

  const handleSubmit = e => {
    e.preventDefault()

    fetchedNote
      ? updateNote(e, fetchedNote, mutateNotes, setAction, t, setPopup)
      : addNote(e, mutateNotes, setAction, t, setPopup)
  }

  return (
    <div className={styles.noteEdit}>
      <h2>{fetchedNote ? t('notes_edit') : t('notes_add_new')}</h2>
      <form onSubmit={handleSubmit}>
        <input
          name='title'
          type='text'
          maxLength={1000}
          placeholder='Title'
          defaultValue={fetchedNote ? fetchedNote.title : ''}
        />
        <textarea
          required
          placeholder='Note'
          name='content'
          defaultValue={fetchedNote ? fetchedNote.content : ''}
        />
        <div className='note__buttons'>
          <span
            className='window__button'
            onClick={() => { setAction(fetchedNote ? 'showNote' : '') }}
          >
            {t('cancel')}
          </span>
          <input
            className='window__button'
            type='submit'
            value={fetchedNote ? t('notes_save') : t('notes_add')}
          />
        </div>
      </form>
    </div>
  )
}

export default NoteEdit