import styles from '../Notes.module.scss'
import React, {useContext} from 'react'
import Context from 'context';
import useNotes from '../hooks/useNotes'
import {addNote, updateNote} from '../helpers/noteActions.js'

const NoteEdit = ({setAction, fetchedNote}) => {
  const {mutateNotes} = useNotes()
  const {setPopup} = useContext(Context)

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

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

  return (
    <div className={styles.noteEdit}>
      <h2>{fetchedNote ? 'Edit note:' : 'Add new note:'}</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' : '')}}
          >
            Cancel
          </span>
          <input
            className='window__button'
            type="submit"
            value={fetchedNote ? 'Save note' : 'Add note'}
          />
        </div>
      </form>
    </div>
  )
}

export default NoteEdit