import React, { useState } from 'react'

import Modal from './modal'

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

export default function Composer({ onSubmit }) {
  const [editorShowing, setEditorShowing] = useState(false)
  const [val, setVal] = useState('')
  const [title, setTitle] = 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}>
            <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)
              }}
            />
            <div className={`actions ${styles.composerAction}`}>
              <span
                onClick={() => {
                  if (!title) {
                    alert('Üres a tartalom!')
                    return
                  }
                  if (!val) {
                    alert('Üres a téma!')
                    return
                  }

                  onSubmit(title, val)
                  setEditorShowing(false)
                }}
              >
                Posztolás
              </span>
            </div>
          </div>
        </Modal>
      )}
    </>
  )
}