import React, { useState, useEffect } from 'react'

import LoadingIndicator from '../LoadingIndicator.js'
import TodoCard from './todoCard.js'

import constants from '../../constants.json'
import styles from './todoTable.module.css'

export default function TodoTable() {
  const [cards, setCards] = useState(null)
  const [columns, setColumns] = useState(null)
  const [categories, setCategories] = useState(null)
  const [userId, setUserId] = useState(null)

  useEffect(() => {
    console.info('Fetching todos')
    fetch(`${constants.apiUrl}todos`, {
      credentials: 'include',
    })
      .then((resp) => {
        return resp.json()
      })
      .then((data) => {
        setTodos(data)
      })
  }, [])

  const setTodos = (data) => {
    setCards(
      data.todos.cards.sort((a, b) => {
        return b.votes.length - a.votes.length
      })
    )
    setColumns(data.todos.columns)
    setCategories(data.todos.categories)
    setUserId(data.userId)
  }

  const onCardClick = (id) => {
    fetch(`${constants.apiUrl}todos?id=${id}`, {
      credentials: 'include',
    })
      .then((resp) => {
        return resp.json()
      })
      .then((data) => {
        setTodos(data)
      })
  }

  if (!cards || !columns || !categories) {
    return <LoadingIndicator />
  }

  return (
    <div>
      <div className={styles.table}>
        {Object.keys(columns).map((key) => {
          const category = columns[key]
          return (
            <div className={styles.tableCol} key={key}>
              <div className={styles.categoryName}>{category.name}</div>
              {cards.map((card, i) => {
                if (card.state === key) {
                  return (
                    <TodoCard
                      key={i}
                      type={key}
                      cardData={card}
                      userId={userId}
                      categories={categories}
                      onClick={onCardClick}
                    />
                  )
                } else {
                  return null
                }
              })}
            </div>
          )
        })}
      </div>
    </div>
  )
}