import React, { useState, useEffect } from 'react'
import fetch from 'unfetch'
import Head from 'next/head'
import Link from 'next/link'

import LoadingIndicator from '../components/LoadingIndicator'
import Sleep from '../components/sleep'
import DbSelector from '../components/dbSelector.js'

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

const links = {
  install: {
    href: '/install',
    text: 'Install',
  },
  irc: {
    href: '/irc',
    text: 'IRC chat',
  },
}

export default function Index(props) {
  const [news, setNews] = useState(null)
  const [allQrSelector, setAllQrSelector] = useState(null)
  const motd = props.globalData.motd
  // const userSpecificMotd = props.globalData.userSpecificMotd

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

  const renderQAItem = (newsItem, key) => {
    return (
      <div key={key} className={styles.itemContainer}>
        <div className={styles.itemNumber}>{key} :</div>
        <div
          className={styles.question}
          dangerouslySetInnerHTML={{ __html: newsItem.q }}
        />
        <div
          className={styles.answer}
          dangerouslySetInnerHTML={{ __html: newsItem.a }}
        />
      </div>
    )
  }

  const renderNewsItem = (newsItem, key) => {
    return (
      <div key={key} className={styles.itemContainer}>
        <div className={styles.itemNumber}>{key} :</div>
        <div
          className={styles.newsTitle}
          dangerouslySetInnerHTML={{ __html: newsItem.title }}
        />
        <div
          className={styles.newsBody}
          dangerouslySetInnerHTML={{ __html: newsItem.body }}
        />
      </div>
    )
  }

  const renderNews = () => {
    if (news) {
      let questions = Object.keys(news)
        .map((key) => {
          let newsItem = news[key]
          if (newsItem.q) {
            return (
              <div key={key}>
                {renderQAItem(newsItem, key)}
                <hr />
              </div>
            )
          } else {
            return (
              <div key={key}>
                {renderNewsItem(newsItem, key)}
                <hr />
              </div>
            )
          }
        })
        .reverse()

      return (
        <div>
          <div className={styles.title}>News</div>
          <hr />
          <hr />
          <div className={styles.questionscontainer}>{questions}</div>
        </div>
      )
    } else {
      return <LoadingIndicator />
    }
  }

  const renderMotd = () => {
    return (
      <div>
        <div className={styles.title}>MOTD</div>
        <hr />
        <hr />
        {motd ? (
          <div
            className={styles.motd}
            dangerouslySetInnerHTML={{ __html: motd }}
          />
        ) : (
          <div>...</div>
        )}
      </div>
    )
  }

  // const renderUserSpecificMotd = () => {
  //   return (
  //     <div>
  //       <hr />
  //       <div className={styles.subtitle}>Üzenet admintól:</div>
  //       {userSpecificMotd ? (
  //         <div
  //           className={styles.motd}
  //           dangerouslySetInnerHTML={{ __html: userSpecificMotd.msg }}
  //         />
  //       ) : (
  //         <div>...</div>
  //       )}
  //     </div>
  //   )
  // }

  const renderDbSelector = () => {
    if (allQrSelector) {
      return (
        <DbSelector
          text={`Válaszd ki melyik adatbázist szeretnéd letölteni (${allQrSelector}):`}
          showAll={allQrSelector === 'txt'}
          closeClick={() => {
            setAllQrSelector(null)
          }}
          onDbSelect={(selectedDb) => {
            if (allQrSelector === 'txt') {
              if (selectedDb === 'all') {
                window.open(`${constants.apiUrl}allqr.txt`, '_blank')
              } else {
                window.open(
                  `${constants.apiUrl}allqr.txt?db=${selectedDb.name}`,
                  '_blank'
                )
              }
            } else if (allQrSelector === 'json') {
              window.open(`${constants.apiUrl}${selectedDb.path}`, '_blank')
            }
          }}
        />
      )
    } else {
      return null
    }
  }

  return (
    <div>
      <Head>
        <title>Qmining | Frylabs.net</title>
      </Head>
      <div className={styles.buttonContainer}>
        {Object.keys(links).map((key) => {
          let link = links[key]
          return (
            <Link key={key} href={link.href}>
              <a className={styles.button} target="_blank">
                {link.text}
              </a>
            </Link>
          )
        })}
        <a
          onClick={() => {
            setAllQrSelector('txt')
          }}
          className={styles.button}
        >
          {'Összes kérdés TXT'}
        </a>
        <a
          onClick={() => {
            setAllQrSelector('json')
          }}
          className={styles.button}
        >
          {'Összes kérdés JSON'}
        </a>
      </div>
      <hr />
      {renderMotd()}
      {/*{userSpecificMotd && renderUserSpecificMotd()} */}
      <hr />
      <hr />
      <Sleep />
      {renderNews()}
      {renderDbSelector()}
    </div>
  )
}