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

import LoadingIndicator from '../components/LoadingIndicator'
import Sleep from '../components/sleep'

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

const selectOptions = {
  newQuestions: { name: 'Beküldött új kérdések' },
  allQuestions: { name: 'Megoldott kérdések' },
  count: { name: 'Megoldott tesztek' },
}

async function getListFromServer() {
  return new Promise((resolve, reject) => {
    console.info('Fetching data')
    fetch(`${constants.apiUrl}ranklist`, {
      credentials: 'include',
      Accept: 'application/json',
      'Content-Type': 'application/json',
    })
      .then((resp) => {
        return resp.json()
      })
      .then((data) => {
        resolve(data)
      })
      .catch((error) => {
        reject(error)
      })
  })
}

function sortDataBy(data, key) {
  return data.sort((a, b) => {
    if (a[key] < b[key]) {
      return 1
    } else if (a[key] > b[key]) {
      return -1
    } else {
      return 0
    }
  })
}

export default function RankList() {
  const [ranklist, setRanklist] = useState(null)
  const [selfUserId, setSelfUserId] = useState(null)
  const [key, setKey] = useState('newQuestions')

  const getList = () => {
    setRanklist(null)
    getListFromServer(key)
      .then((data) => {
        setRanklist(data.list)
        setSelfUserId(data.selfUserId)
      })
      .catch((error) => {
        console.error(error)
        setRanklist(null)
      })
  }

  useEffect(() => {
    getList()
  }, [])

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

  const list = sortDataBy(ranklist, key)

  return (
    <div>
      <div>
        <div
          className={styles.infoText}
        >{`A felhasználó ID-d: #${selfUserId}`}</div>
        <Sleep />
        <div className={styles.table}>
          <div className={styles.headerRow}>
            <div>{'Rank'}</div>
            <div>{'Felhasználó ID'}</div>
            {Object.keys(selectOptions).map((listKey) => {
              const val = selectOptions[listKey]
              return (
                <div
                  className={`${styles.clickable} ${listKey === key &&
                    styles.selected}`}
                  key={listKey}
                  onClick={() => {
                    setKey(listKey)
                  }}
                >
                  {val.name}
                </div>
              )
            })}
          </div>
          {list.map((listItem, i) => {
            return (
              <div
                className={`${styles.row} ${listItem.userId === selfUserId &&
                  styles.selfRow}`}
                key={i}
              >
                <div>{i + 1}</div>
                <div>{'#' + listItem.userId}</div>
                {Object.keys(selectOptions).map((listKey) => {
                  const val = listItem[listKey]
                  return <div key={listKey}>{val}</div>
                })}
              </div>
            )
          })}
        </div>
      </div>
    </div>
  )
}