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

const NoteView = ({ fetchedNote, setFetchedNote, setAction }) => {
  const { t } = useSettings()
  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>
          <div onClick={() => { setFetchedNote(); setAction('') }}>{t('back')}</div>
          <div onClick={() => copyToClipboard(content, t, setPopup)}>{t('copy')}</div>
          <div onClick={() => { setAction('editNote') }}>{t('edit')}</div>
          <div onClick={() => exportNote(fetchedNote)}>{t('export')}</div>
          <div onClick={e => { removeNote(e, _id, mutateNotes, t, setPopup, setAction) }}>{t('remove')}</div>
        </div>
      </div>

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

export default NoteView