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

const NoteEdit = ({action, setAction, fetchedNote}) => {
  const [text, setText] = useState('')
  const {mutateNotes} = useNotes()
  const [errorMsg, setErrorMsg] = useState('')
  const {setPopup} = useContext(Context)

  const handleSubmit = e => {
    e.preventDefault()
    fetchedNote
      ? updateNote(e, fetchedNote, mutateNotes, setAction, setPopup)
      : addNote(e, mutateNotes, setAction, setPopup)
  }

  // if (!fetchedNote) return <p>Loading...</p>
  // if (fetchedNote.error) {
  //   setFetchedNote()
  //   setAction('')
  // }

  return (
    <div className={styles.noteEdit}>
      <h2>{fetchedNote ? 'Edit note:' : 'Add new note:'}</h2>
      <form onSubmit={handleSubmit}>
        <input
          name='title'
          type='text'
          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>
      <style jsx>{`
      `}</style>
    </div>
  )
}

export default NoteEdit