import React, { useState } from 'react'

import Modal from './modal'

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

function FileUploader({ onChange }) {
  return (
    <div className={styles.inputArea}>
      <div className={styles.textTitle}>Fájl csatolása</div>
      <input
        className={styles.fileInput}
        type="file"
        name="file"
        onChange={onChange}
      />
    </div>
  )
}

export default function Composer({ onSubmit }) {
  const [editorShowing, setEditorShowing] = useState(false)
  const [val, setVal] = useState('')
  const [type, setType] = useState('public')
  const [title, setTitle] = useState('')
  const [file, setFile] = useState()

  return (
    <>
      <center>
        <div
          onClick={() => {
            setEditorShowing(true)
          }}
          className={styles.new}
        >
          Bejegyzés írása...
        </div>
      </center>
      {editorShowing && (
        <Modal
          closeClick={() => {
            setEditorShowing(false)
          }}
        >
          <div className={styles.container}>
            {type !== 'private' && (
              <input
                placeholder={'Téma...'}
                required
                value={title}
                onChange={(e) => {
                  setTitle(e.target.value)
                }}
              />
            )}
            <textarea
              placeholder={'Írj ide valamit...'}
              required
              value={val}
              onChange={(e) => {
                setVal(e.target.value)
              }}
            />
            {type === 'private' && (
              <FileUploader
                onChange={(e) => {
                  setFile(e.target.files[0])
                }}
              />
            )}
            <div id="radiolabel">
              <p>
                <b>A poszt típusa:</b>
              </p>
            </div>
            <div className={styles.typeSelector}>
              <div title="A főoldalon mindenki láthatja, reagálhat rá és kommentelhet alá">
                <input
                  onChange={(e) => {
                    setType(e.target.value)
                  }}
                  type="radio"
                  name="type"
                  value="public"
                  defaultChecked
                />
                Publikus
              </div>
              <div title="Csak admin bácsi látja">
                <input
                  onChange={(e) => {
                    setType(e.target.value)
                  }}
                  type="radio"
                  name="type"
                  value="private"
                />
                Privát
              </div>
            </div>
            <div className={styles.tip}>
              <b>Tipp:</b> vidd a kurzort a poszt-típusok fölé több infóért!
            </div>
            <div className={styles.composerAction}>
              <span
                onClick={() => {
                  onSubmit(type, title, val, file)
                  setEditorShowing(false)
                }}
              >
                Posztolás
              </span>
            </div>
          </div>
        </Modal>
      )}
    </>
  )
}