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

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

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

  const {_id, content, title} = fetchedNote

  return (
    <section className={styles.noteView}>
      <div className='window__submenu'>
        <div onClick={() => { setFetchedNote(); setAction('') }}>Back</div>
        <div onClick={() => copyToClipboard(content, setPopup)}>Copy</div>
        <div onClick={() => { setAction('editNote')}}>Edit</div>
        <div onClick={e => { removeNote(e, _id, mutateNotes, setPopup, setAction) }}>Remove</div>
      </div>

      <div className='window__scroll'>
        <h2>{title}</h2>
        <p>{content}</p>
      </div>
      <style jsx>{`
      `}</style>
    </section>
  )
}

export default NoteView