import styles from '../styles/Notes.module.scss'
import React, {useState, useEffect} from 'react'
import useUser from 'hooks/useUser'
import useSettings from 'hooks/useSettings'
import useNotes from '../hooks/useNotes'
import useSort from '../hooks/useSort'
import ListItem from './ListItem'
import Actions from './Actions'
import {Splash} from 'components'

const List = () => {
  const [fetchedNote, setFetchedNote] = useState()
  const [action, setAction] = useState('')
  const [loading, setLoading] = useState(false)
  const {notes, error} = useNotes()
  const [sortedBy, sortBy, sortFn] = useSort(3)
  const {t} = useSettings()
  const {user} = useUser({
    redirectToLogin: true,
    redirectToVerify: true,
  })

  useEffect(() => {
    setLoading(false)
  }, [fetchedNote])

  if (error) return <Splash type='connection' />
  if (loading) return <Splash />
  if (!user || !user.isLoggedIn || !user.isVerified || !notes || !sortFn) {
    return <Splash />
  }

  return (
    action === '' ? (
      <>
        <div className='window__submenu'>
          <div onClick={() => setAction('addNote')}>{t('notes_new')}</div>
          <div onClick={() => setAction('importNotes')}>{t('import')}</div>
          <div onClick={() => setAction('exportNotes')}>{t('export')}</div>
        </div>
        <table className={styles.notesList}>
          <thead>
            <tr>
              <th onClick={() => sortBy(1)}>{t('title')} {sortedBy(1)}</th>
              <th onClick={() => sortBy(2)}>{t('created')} {sortedBy(2)}</th>
              <th onClick={() => sortBy(3)}>{t('modified')} {sortedBy(3)}</th>
            </tr>
          </thead>
          <tbody>
            {
              notes.length > 0
                ? (notes.sort(sortFn).map(note => (
                  <ListItem
                    key={note._id}
                    note={note}
                    setAction={setAction}
                    setFetchedNote={setFetchedNote}
                    setLoading={setLoading}
                  />
                ))) : (
                  <tr>
                    <td>{t('notes_list_empty')}</td>
                  </tr>
                )}
          </tbody>
        </table>
      </>
    ) : (
      <Actions
        action={action}
        setAction={setAction}
        fetchedNote={fetchedNote}
        setFetchedNote={setFetchedNote}
      />
    )
  )
}

export default List