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

import Sleep from '../components/sleep'
import Todos from '../components/todoStuff/todos'

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

export default function contribute() {
  const [newTask, setNewTask] = useState('')

  const submitNewTask = async () => {
    if (!newTask) {
      return
    }

    fetch(constants.apiUrl + 'postfeedback', {
      method: 'POST',
      credentials: 'include',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        newTask: newTask,
        from: 'contribute',
      }),
    })
      .then((resp) => {
        return resp.json()
      })
      .then((resp) => {
        if (resp.success) {
          alert('Elküldve')
          setNewTask('')
        } else {
          alert('Hiba küldés közben')
        }
      })
      .catch((err) => {
        alert('Hiba küldés közben')
        console.error(err)
      })
  }

  const renderNewTaskArea = () => {
    return (
      <div className={styles.inputArea}>
        <textarea
          onChange={(event) => setNewTask(event.target.value)}
          value={newTask || ''}
          className={styles.feedback}
        />
        <button className={styles.button} onClick={submitNewTask}>
          Küldés
        </button>
      </div>
    )
  }

  return (
    <div>
      <div className={styles.description}>
        Itt írhatsz új todo-ra ötleteket, vagy jelezhetsz hogy egyikben
        segítenél
      </div>
      <div className={styles.description}>
        Egy kártyára kattintva nézheted meg a részleteket, vagy szavazhatsz.
        Minél több szavazat érkezik egy kártyára, annál magasabb lesz a
        pioritása. Jobb alsó szám minél több, annál nehezebb a feladat. A Done
        oszlopban lévő feladatok kész vannak, de különböző okok miat még nem
        lettek kiadva frissítésként. Ami az In Prod táblázatban van az van kint.
      </div>
      <Todos />
      {renderNewTaskArea()}
      <Sleep />
    </div>
  )
}