import '../styles/components/editForm.scss'
import { ___ucWords } from '../helpers'
import { FILTER_GRID_DATA_BY_ROUTE } from '../redux/reducersTypes'
import Database from '../controllers/Database'

const EditForm = ({ label = 'Note', show, setShow, dispatch, route, alert, setAlert }) => {
  if (!show) return null

  const categories = window.env.schemas.note.category[1].slice(2, -2).split('|')

  const submitNote = e => {
    e.preventDefault()

    const formData = new FormData(e.target.closest('form'))
    const data = {}
    for (let key of formData.keys()) {
      data[key] = formData.get(key)
    }

    const isSavedNote = Database.saveNote(data)

    if (isSavedNote === true) {
      dispatch({ type: FILTER_GRID_DATA_BY_ROUTE, payload: route })
      setShow(false)
    } else {
      setAlert({ hiddenClass: '', value: isSavedNote })
    }
  }

  return (
    <div className="modal">
      <form id="editNoteForm" className="uk-form-horizontal uk-margin-large modal-content">
        <fieldset className="uk-fieldset">
          <legend className="uk-legend">
            <span className="uk-float-right uk-text-small">
                created: <input type="text" name="createdAt" readOnly="readonly" value="" placeholder="0000-00-00"/>
                updated: <input type="text" name="updatedAt" readOnly="readonly" value="" placeholder="0000-00-00"/>
            </span>
            <span>{label} #<input className="uk-text-large" type="text" name="id" readOnly="readonly" value=""
                                  placeholder="New"/></span>
          </legend>

          <pre id="modalMsgBox" className={'uk-text-bold uk-alert-danger uk-alert-danger uk-padding-top ' +
          alert.hiddenClass}>{alert.value}</pre>

          <div className="uk-margin">
            <label className="uk-form-label uk-text-uppercase" htmlFor="formTitle">Title <span/></label>
            <div className="uk-form-controls">
              <input id="formTitle" name="title" className="uk-input" type="text" maxLength={window.env.schemas.note.title[1]}
                     placeholder="Add a title..." required/>
            </div>
          </div>

          <div className="uk-margin">
            <label className="uk-form-label uk-float-right uk-text-uppercase" htmlFor="formCategory">Category</label>
            <div className="uk-form-controls">
              <select id="formCategory" name="category" className="uk-select" defaultValue={'Select a category...'} required>
                <option disabled>Select a category...</option>
                <option disabled/>
                {categories.map((value, key) => <option key={key} value={value}>{___ucWords(value)}</option>)}
              </select>
            </div>
          </div>

          <div className="uk-margin">
            <label className="uk-form-label uk-text-uppercase" htmlFor="noteContentInput">Description <span/></label>
            <textarea id="noteContentInput" name="content" className="uk-textarea uk-margin-top" rows="6"
                      maxLength={window.env.schemas.note.content[1]} placeholder="Description..."/>
          </div>

          <div className="uk-margin">
            <label className="uk-form-label uk-float-right" htmlFor="formArchived">Archived</label>
            <div className="uk-form-controls">
              <input id="formArchived" name="archive" className="uk-checkbox" type="checkbox"/>
            </div>

          </div>

          <hr/>

          <div className="uk-clearfix">
            <div className="uk-float-right">
              <button type="submit" className="uk-button uk-button-default" onClick={submitNote}>Submit</button>
            </div>
            <div className="uk-float-left">
              <button type="button" id="btnDestroyModal" className="uk-button uk-button-danger"
                      onClick={() => setShow(false)}>Close
              </button>
            </div>
          </div>

        </fieldset>
      </form>
    </div>
  )
}

export default EditForm