import styles from './feedback.module.css'

import constants from '../constants.json'

export default function Feedback (props) {
  // TODO: textarea style to css
  // TODO: response to user that msg is sucessfully sent
  const renderTestSender = () => {
    return (
      <div>
      Hibát kiváltó teszt feltöltése
        <br />

        <form action={constants.apiUrl + 'badtestsender'} encType='multipart/form-data' method='post'>
          <input type='file' name='dasfile' />
          <input type='submit' value='Upload' />
        </form>

        <p />
    Ha egy kérdésre mindig helytelenül talál választ a userscript (vagy egyéb hibát észlelsz), akkor
    azon az oldalon nyomj egy ctrl-s -t. Ez lementi a weboldalt úgy ahogy van egy mappába, és egy
    html fájlba. Ezt a kettőt ha berakod egy .zip-be, és ide feltöltöd, akkor ránézek mi lehet a
    hiba, és kijavítom. <b> Max 10 MB!  </b> Ha több, elég a .html. Bónusz ha mellékelsz egy
    readme-t, hogy mit csináljak.
      </div>

    )
  }

  const renderFeedback = () => {
    return (
      <div>
        <form action={constants.apiUrl + 'postfeedback'} method='post'>
          <div>Észrevételek: (közeledő teszt miatti kérdés-karbantartás, bug, feature vagy egyéb dolog, ami nyomja a lelked)</div>
          <textarea
            className='feedbackArea'
            type='text'
            name='message_field'
            style={{
              width: '100%',
              boxSizing: 'border-box',
              height: '400px'
            }}
          />
          <div>Rengeteg spam-et kapok, nyugodtan küldd el ezerszer, akkor hátha észreveszem a spam között :)</div>
          <button>Küldés</button>
        </form>
      </div>
    )
  }

  return (
    <div>
      <center>
        <a href='/irc'>
          <div className={styles.ircLink}>
          IRC chat
          </div>
        </a>
      </center>
      <p />
      <hr />
      <p />
      {renderFeedback()}
      <p />
      <hr />
      <p />
      {renderTestSender()}
    </div>
  )
}