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

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

import Sidebar from '../sidebar.js'

import styles from './todo.module.css'
// import styles from './todos.module.css'
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 [cards, setCards] = useState(null)
  const [categories, setCategories] = useState(null)
  const [userId, setUserId] = useState(null)
  const [sidebarCard, setSidebarCard] = useState(null)
  const [namedGroups, setGroups] = useState(null)
  const [selectedGroup, setSelectedGroup] = 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)
    setGroups(data.todos.groups)
    setUserId(data.userId)

    setCards(data.todos.cards)
    setColumns(data.todos.columns)
    setLoaded(true)
  }

  const onClick = (card) => {
    setSidebarCard(card.id)
  }

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

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

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

  const groups = cards.reduce((acc, card) => {
    if (!acc.includes(card.group) && card.group) {
      acc.push(card.group)
    }
    return acc
  }, [])

  const renderGrouper = () => {
    const sg = namedGroups[selectedGroup]
    return (
      <>
        <div className={styles.groupContainer}>
          {groups.map((group) => {
            const namedGroup = namedGroups[group]
            return (
              <div
                className={`${styles.group} ${group === selectedGroup &&
                  styles.selectedGroup}`}
                key={group}
                onClick={() => {
                  setSelectedGroup(group)
                }}
              >
                {namedGroup ? namedGroup.name : group}
              </div>
            )
          })}
          <div
            className={`${styles.group} ${'uncat' === selectedGroup &&
              styles.selectedGroup}`}
            onClick={() => {
              setSelectedGroup('uncat')
            }}
          >
            {'Kategorizálatlan'}
          </div>
          <div
            className={styles.group}
            onClick={() => {
              setSelectedGroup(null)
            }}
          >
            {'Összes'}
          </div>
        </div>
        {sg && sg.description ? (
          <div className={styles.groupDescription}>{sg.description}</div>
        ) : null}
      </>
    )
  }

  return (
    <div>
      {sidebarCard && (
        <Sidebar
          onClose={() => {
            setSidebarCard(null)
          }}
        >
          <TodoSidebar
            card={cards.find((card) => {
              return card.id === sidebarCard
            })}
            userId={userId}
            categories={categories}
            columns={columns}
            namedGroups={namedGroups}
            voteOn={(card) => {
              fetch(`${constants.apiUrl}voteTodo?id=${card.id}`, {
                credentials: 'include',
              })
                .then((resp) => {
                  return resp.json()
                })
                .then((data) => {
                  setTodos(data)
                })
            }}
          />
        </Sidebar>
      )}
      {renderGrouper()}
      <div
        style={{
          // width: '100%',
          marginRight: sidebarCard ? 380 : 0,
        }}
      >
        <TodoBoard
          columns={cols}
          cards={bCards}
          userId={userId}
          categories={categories}
          onCardClick={onClick}
          selectedGroup={selectedGroup}
        />
        <TodoTable
          tables={tables}
          cards={tCards}
          userId={userId}
          categories={categories}
          onClick={onClick}
          selectedGroup={selectedGroup}
        />
      </div>
    </div>
  )
}