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

import LoadingIndicator from '../components/LoadingIndicator.js'

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

const getDefaultQuestion = () => {
  return {
    Q: '',
    A: '',
    data: { type: 'simple' },
  }
}

export default function AddQuestion() {
  const [form, setForm] = useState({ quiz: [getDefaultQuestion()] })
  const [subjects, setSubjects] = useState(undefined)
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [isNewSubj, setIsNewSubj] = useState(false)

  useEffect(() => {
    console.info('Fetching subject names')
    fetch(`${constants.apiUrl}dataCount?detailed=true`, {
      credentials: 'include',
    })
      .then((resp) => {
        return resp.json()
      })
      .then((data) => {
        let res = data.reduce((acc, x) => {
          return [
            ...acc,
            ...x.subjs.map((subj) => {
              return subj.name
            }),
          ]
        }, [])

        res = res.sort()
        setSubjects(res)
      })
  }, [])

  const onChange = (newData, index) => {
    let quiz = form.quiz
    quiz[index] = newData

    setForm({
      ...form,
      quiz: quiz,
    })
  }

  const renderQuestionInput = (params) => {
    const { index, onChange } = params
    const currData = form.quiz[index]
    const { Q, A, data } = form.quiz[index] || {}

    return (
      <div className={styles.questionContainer}>
        <div className={styles.inputContainer}>
          <input
            placeholder="Kérdés..."
            type="text"
            onChange={(err) =>
              onChange({ ...currData, Q: err.target.value }, index)
            }
            value={Q || ''}
            className={styles.questionInput}
          />
        </div>
        <div className={styles.inputContainer}>
          <input
            placeholder="Válasz..."
            type="text"
            onChange={(err) =>
              onChange({ ...currData, A: err.target.value }, index)
            }
            value={A || ''}
            className={styles.questionInput}
          />
        </div>
        <div className={styles.inputContainer}>
          <input
            type="text"
            onChange={(e) => {
              // TODO: handle JSON
              // try {
              //   let newData = JSON.parse(e.target.value)
              //   onChange({ ...currData, data: newData }, index)
              // } catch (e) {
              // }
            }}
            value={JSON.stringify(data) || ''}
            className={styles.questionInput}
          />
          <span
            className={styles.deleteButton}
            onClick={() => deleteQuestion(index)}
          >
            Kérdés törlése
          </span>
        </div>
        <hr />
      </div>
    )
  }

  const deleteQuestion = (index) => {
    let quiz = form.quiz

    quiz.splice(index, 1)

    setForm({
      ...form,
      quiz: quiz,
    })
  }

  const handleSubmit = async () => {
    if (!form.subj) {
      alert('Nem választottál ki tantárgyat!') // eslint-disable-line
      return
    }
    let isValid = form.quiz.every((x) => {
      return x.Q && x.A
    })
    if (!isValid || form.quiz.length === 0) {
      alert('Kérdés kitöltése kötelező!') // eslint-disable-line
      return
    }

    const t = document.getElementById('cid').value
    let cid = ''
    let version = ''
    if (t) {
      cid = t.split('|')[0]
      version = t.split('|')[1]
    }

    setIsSubmitting(true)

    const rawResponse = await fetch(constants.apiUrl + 'isAdding', {
      method: 'POST',
      credentials: 'include',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        ...form,
        id: cid,
        version: 'WEBSITE',
        scriptVersion: version,
      }),
    })
    rawResponse
      .json()
      .then((resp) => {
        if (resp.success) {
          alert(
            'Sikeres beküldés, ' +
              resp.newQuestions.reduce((acc, res) => {
                return acc + res.newQuestions
              }, 0) +
              ' új kérdés'
          ) // eslint-disable-line
          setIsSubmitting(false)
        } else {
          alert('Hiba beküldés közben :/') // eslint-disable-line
          setIsSubmitting(false)
        }
      })
      .catch((err) => {
        alert('Hiba beküldés közben :/') // eslint-disable-line
        console.log(err)
        setIsSubmitting(false)
      })
  }

  const renderStuff = (props) => {
    return (
      <div>
        {form.quiz.map((q, i) => {
          return (
            <div key={i}>
              {renderQuestionInput({
                index: i,
                onChange,
              })}
            </div>
          )
        })}
        <div className={styles.buttonContainer}>
          <button
            className={styles.button}
            onClick={() => {
              let quiz = form.quiz
              quiz.push(getDefaultQuestion())
              setForm({
                ...form,
                quiz: quiz,
              })
            }}
          >
            Új kérdés hozzáadása
          </button>
        </div>
        {isSubmitting ? (
          <div className={styles.issubmitting}>
            Kérdések feldolgozása folyamatban, ha sokat küldtél, akkor több perc
            is lehet
          </div>
        ) : (
          <div className={styles.buttonContainer}>
            <button className={styles.button} onClick={handleSubmit}>
              Kérdések beküldése
            </button>
          </div>
        )}
        <input type="text" id="cid" name="cid" hidden />
      </div>
    )
  }

  const renderSubjSelector = () => {
    // TODO: handle if new subject
    return (
      <div className={styles.subjSelectorContainer}>
        {isNewSubj ? (
          <input
            placeholder="Új tárgy neve..."
            type="text"
            className={styles.questionInput}
            onChange={(e) => {
              setForm({
                ...form,
                subj: e.target.value,
              })
            }}
          />
        ) : (
          <select
            className={styles.subjSelector}
            onChange={(e) => {
              setForm({
                ...form,
                subj: subjects[e.target.value],
              })
            }}
          >
            <option key={-1} value={-1}>
              Válassz egy tárgyat...
            </option>
            {subjects.map((subjName, i) => {
              return (
                <option key={i} value={i}>
                  {subjName}
                </option>
              )
            })}
          </select>
        )}
        <span
          className={styles.newSubj}
          onClick={() => {
            setIsNewSubj(!isNewSubj)
          }}
        >
          {isNewSubj ? 'Létező tárgy ...' : 'Új tárgy ...'}
        </span>
      </div>
    )
  }

  const renderUsage = () => {
    return (
      <ul className={styles.usage}>
        <li>Ezen az oldalon kérdéseket tudsz beküldeni manuálisan.</li>
        <li>Ezek a kérdések ellenőrizve lesznek hogy megvannak-e már</li>
        <li>
          Ha több válasz van, akkor ', '-vel válaszd el őket ( "válasz1,
          válasz2, válasz3" )
        </li>
        <li>
          Kérdéseknél az utolsó sor (ahol a JSON cucc van) jelenleg nem
          módosítható, csak olyan kérdéseket lehet beküldeni, amik sima
          kérdés-válaszok, szóval pl nincs benne kép. Ez később bővül majd
        </li>
        <li>
          Ha sok új kérdést küldesz be, akkor akár több percig is eltarthat a
          dolog. Akárhány kérdést be lehet egyszerre küldeni, de max 10-15 az
          ajánlott
        </li>
        <li>
          Bármilyen szöveget beküldhettek, de ne tegyétek, más felhasználóknak
          és magatoknak lesz rosz, ty!
        </li>
      </ul>
    )
  }

  return (
    <div>
      <Head>
        <title>Qmining - Kérdés beküldés</title>
      </Head>
      {subjects ? (
        <>
          {renderUsage()}
          <hr />
          {renderSubjSelector()}
          {renderStuff()}
        </>
      ) : (
        <LoadingIndicator />
      )}
    </div>
  )
}