import styles from '../Notes.module.scss'
import React from 'react';
import useNotes from '../hooks/useNotes'
import usePopup from 'hooks/usePopup'
import {removeNote, exportNote} from '../helpers/noteActions.js'
import copyToClipboard from '../helpers/copyToClipboard.js'
import Splash from 'components/Splash'

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

  if (!fetchedNote) return <Splash />
  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={() => exportNote(fetchedNote)}>Export</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