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

const List = () => {
  const [fetchedNote, setFetchedNote] = useState()
  const [action, setAction] = useState('')
  const {notes, error} = useNotes()
  const [sortedBy, sortBy, sortFn] = useSort(2)
  const {user, mutateUser} = useUser({
    redirectToLogin: true,
    redirectToVerify: true,
  })

  if (error) return <Splash type='connection' />

  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('importNote')}>Import</div>
              <div onClick={() => {}}>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}
                      />
                    ))) : (
                      <tr>
                        <td>Your notes list is empty.</td>
                      </tr>
                    )}
              </tbody>
            </table>
          </>
        ) : (
          <Actions
            action={action}
            setAction={setAction}
            fetchedNote={fetchedNote}
            setFetchedNote={setFetchedNote}
          />
        )
      }
    </>
  )
}

export default List