import styles from '../Notes.module.scss'
import React, {useState, useEffect} from 'react'
import useUser from 'lib/useUser'
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 {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')}>New note</div>
          <div onClick={() => setAction('importNotes')}>Import</div>
          <div onClick={() => setAction('exportNotes')}>Export</div>
        </div>
        <table className={styles.notesList}>
          <thead>
            <tr>
              <th onClick={() => sortBy(1)}>Title {sortedBy(1)}</th>
              <th onClick={() => sortBy(2)}>Created {sortedBy(2)}</th>
              <th onClick={() => sortBy(3)}>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>Your notes list is empty.</td>
                  </tr>
                )}
          </tbody>
        </table>
      </>
    ) : (
      <Actions
        action={action}
        setAction={setAction}
        fetchedNote={fetchedNote}
        setFetchedNote={setFetchedNote}
      />
    )
  )
}

export default List