import styles from '../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 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 className='window__scroll'>
        <h2>{title}</h2>
        <p>{content}</p>
      </div>
    </section>
  )
}

export default NoteView