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

import LoadingIndicator from '../LoadingIndicator.js'
import TodoBoard from './todoBoard.js'
import TodoTable from './todoTable.js'

import constants from '../../constants.json'

const byVotes = (a, b) => {
  return b.votes.length - a.votes.length
}

export default function Todos() {
  const [loaded, setLoaded] = useState(false)
  const [columns, setColumns] = useState(null)
  const [boardCards, setBoardCards] = useState(null)
  const [tables, setTables] = useState(null)
  const [tableCards, setTableCards] = 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) => {
    setCategories(data.todos.categories)
    setUserId(data.userId)

    let bCards = []
    let tCards = []
    data.todos.cards.forEach((card) => {
      if (data.todos.columns[card.state].type === 'table') {
        tCards.push(card)
      } else {
        bCards.push(card)
      }
    })

    setTableCards(tCards.sort(byVotes))
    setBoardCards(bCards.sort(byVotes))

    let cols = {}
    let tables = {}
    Object.keys(data.todos.columns).forEach((key) => {
      const col = data.todos.columns[key]
      if (col.type !== 'table') {
        cols = {
          ...cols,
          [key]: col,
        }
      } else {
        tables = {
          ...tables,
          [key]: col,
        }
      }
    })
    setColumns(cols)
    setTables(tables)

    setLoaded(true)
  }

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

  if (!loaded) {
    return <LoadingIndicator />
  }

  return (
    <div>
      <TodoBoard
        columns={columns}
        cards={boardCards}
        userId={userId}
        categories={categories}
        onCardClick={onCardClick}
      />
      <TodoTable
        tables={tables}
        cards={tableCards}
        userId={userId}
        categories={categories}
      />
    </div>
  )
}