import React, { useState } from 'react'

import Todos from '../components/todoStuff/todos'
import FeedbackArea from '../components/feedbackArea'
import Modal from '../components/modal'
import Header from '../components/header'

import constants from '../constants.json'
import styles from './contribute.module.css'
import repos from '../data/repos.json'

export default function Contribute({ globalState, setGlobalState }) {
  const [showFeedback, setShowFeedback] = useState(false)

  return (
    <div>
      <Header title={'Todos'} />
      <div className={'pageHeader'}>
        <h1>Teendők</h1>
      </div>
      <div className={'description'}>
        <p>
          Ezen az oldalon új ötleteket adhatsz hozzá megvalósításra a teendők
          listájához.
        </p>
        <p>
          Emellet ha hozzáértő vagy, adott feladatok megvalósításában is
          segíthetsz. (lásd: <a href="#gitrepo">lentebb</a>)
          <br /> Ha egy kártyára kattintasz, a megjelenő ablakban láthatod annak
          részleteit, illetve{' '}
          <b>
            <i>szavazhatsz</i>
          </b>{' '}
          is a feladatra, annak érdekében, hogy minél hamarabb megvalósulhasson.
          Minél több szavazat érkezik egy kártyára, annál magasabb lesz a
          prioritása. (értsd: a legtöbb szavazatot kapó kártya teendője lesz
          legelőször megvalósítva)
          <br /> A kurzort az oszlopcímekre mozgatva, további információkat
          olvashatsz a kategóriák tulajdonságairól.
        </p>
      </div>
      <div className={`buttonContainer`}>
        <div
          onClick={() => {
            setShowFeedback(true)
          }}
        >
          Új feladat
        </div>
      </div>
      <br />
      <hr />
      <Todos globalState={globalState} setGlobalState={setGlobalState} />
      <hr />
      <div id={'gitrepo'} className={styles.gitRepos}>
        <div>
          <div className={'subtitle'}>
            <b>Git repos</b>
          </div>
          <div>
            {Object.keys(repos.repos).map((key) => {
              let repo = repos.repos[key]
              return (
                <div key={key}>
                  <ul>
                    <li>
                      <a key={key} href={repo.href}>
                        {repo.description}
                      </a>
                    </li>
                  </ul>
                </div>
              )
            })}
          </div>
        </div>
        <img src={`${constants.siteUrl}img/bug.png`} />
      </div>
      <hr />
      {showFeedback && (
        <Modal
          closeClick={() => {
            setShowFeedback(false)
          }}
        >
          <FeedbackArea from={'contribute'} />
        </Modal>
      )}
    </div>
  )
}