import React from 'react'
import injectSheet from 'react-jss'
import classNames from 'classnames'
import PropTypes from 'prop-types'

import Button from '../../components/Button'
import Form from '../../components/Form'
import sharedFormStyles from '../../components/Form/sharedFormStyles'
import Control from '../../components/Control'
import ControlSide from '../../components/Control/Side'
import ControlPiece from '../../components/Control/Piece'

const MorphForm = props => {
  const filePicker = React.createRef()

  const join = data => data.join('\n')

  const invokeFilePicker = e => {
    e.preventDefault()
    filePicker.current.value = ''
    filePicker.current.click()
  }

  return (
    <Form>
      <div className={props.styles.section}>
        <div
          className={classNames(
            props.styles.categories,
            props.styles.inputSection,
            props.classes.part
          )}
        >
          <h5 className={props.classes.sectionTitle}>Categories</h5>
          <div className={props.styles.container}>
            <textarea
              id='categories'
              name='categories'
              className={classNames(
                props.styles.categoriesInput,
                props.styles.dataInput
              )}
              value={join(props.data.categories)}
              onChange={props.change}
            />
            <div className={props.styles.textAreaSpacer}>
              {join(props.data.categories)}
            </div>
          </div>
        </div>
        <div
          className={classNames(
            props.styles.rewriteRules,
            props.styles.inputSection,
            props.classes.part
          )}
        >
          <h5 className={props.classes.sectionTitle}>Rewrite Rules</h5>
          <div className={props.styles.container}>
            <textarea
              id='rewriteRules'
              name='rewriteRules'
              className={classNames(
                props.styles.rewriteRulesInput,
                props.styles.dataInput
              )}
              value={join(props.data.rewriteRules)}
              onChange={props.change}
            />
            <div className={props.styles.textAreaSpacer}>
              {join(props.data.rewriteRules)}
            </div>
          </div>
        </div>
        <div
          className={classNames(
            props.styles.soundChanges,
            props.styles.inputSection,
            props.classes.part
          )}
        >
          <h5 className={props.classes.sectionTitle}>Sound Changes</h5>
          <div className={props.styles.container}>
            <textarea
              id='soundChanges'
              name='soundChanges'
              className={classNames(
                props.styles.soundChangesInput,
                props.styles.dataInput
              )}
              value={join(props.data.soundChanges)}
              onChange={props.change}
            />
            <div className={props.styles.textAreaSpacer}>
              {join(props.data.soundChanges)}
            </div>
          </div>
        </div>
        <div
          className={classNames(
            props.styles.lexicon,
            props.styles.inputSection,
            props.classes.part
          )}
        >
          <h5 className={props.classes.sectionTitle}>Lexicon</h5>
          <div className={props.styles.container}>
            <textarea
              id='lexicon'
              name='lexicon'
              className={classNames(
                props.styles.lexiconInput,
                props.styles.dataInput
              )}
              value={join(props.data.lexicon)}
              onChange={props.change}
            />
            <div className={props.styles.textAreaSpacer}>
              {join(props.data.lexicon)}
            </div>
          </div>
        </div>
      </div>
      <Control addedClasses={props.classes.part}>
        <ControlSide side='left'>
          <ControlPiece>
            <Button type='submit' ver='neutral' onClick={props.morph}>
              Change
            </Button>
          </ControlPiece>
          <ControlPiece>
            <label htmlFor='outputFormat'>output format:</label>
            <select
              id='outputFormat'
              name='outputFormat'
              value={props.data.outputFormat}
              onChange={props.change}
            >
              <option value='oo'>output</option>
              <option value='io'>input &rarr; output</option>
              <option value='oi'>output &larr; input</option>
            </select>
          </ControlPiece>
          <ControlPiece>
            <label>
              <input
                type='checkbox'
                id='showDiff'
                name='options'
                value='showDiff'
                checked={props.data.showDiff}
                onChange={props.check}
              />{' '}
              show differences
            </label>
          </ControlPiece>
          <ControlPiece>
            <label>
              <input
                type='checkbox'
                id='ruleReport'
                name='options'
                value='ruleReport'
                checked={props.data.ruleReport}
                onChange={props.check}
              />{' '}
              report applied rules
            </label>
          </ControlPiece>
          <ControlPiece>
            <label>
              <input
                type='checkbox'
                id='rewriteOutput'
                name='options'
                value='rewriteOutput'
                checked={props.data.rewriteOutput}
                onChange={props.check}
              />{' '}
              rewrite on output
            </label>
          </ControlPiece>
        </ControlSide>
        <ControlSide side='right'>
          <ControlPiece>
            <Button id='save' ver='success' onClick={props.save} type='button'>
              Save
            </Button>
          </ControlPiece>
          <ControlPiece>
            <Button id='open' onClick={invokeFilePicker} type='button'>
              Open
            </Button>
            <input
              id='file'
              name='file'
              className={props.classes.hidden}
              type='file'
              ref={filePicker}
              onChange={props.open}
            />
          </ControlPiece>
        </ControlSide>
      </Control>
    </Form>
  )
}

MorphForm.propTypes = {
  classes: PropTypes.object,
  styles: PropTypes.object,
  data: PropTypes.shape({
    categories: PropTypes.arrayOf(PropTypes.string).isRequired,
    rewriteRules: PropTypes.arrayOf(PropTypes.string).isRequired,
    soundChanges: PropTypes.arrayOf(PropTypes.string).isRequired,
    lexicon: PropTypes.arrayOf(PropTypes.string).isRequired,
    outputFormat: PropTypes.oneOf(['oo', 'io', 'oi']).isRequired,
    showDiff: PropTypes.bool.isRequired,
    ruleReport: PropTypes.bool.isRequired,
    rewriteOutput: PropTypes.bool.isRequired
  }).isRequired,
  change: PropTypes.func.isRequired,
  morph: PropTypes.func.isRequired,
  check: PropTypes.func.isRequired,
  save: PropTypes.func.isRequired,
  open: PropTypes.func.isRequired
}

export default injectSheet(sharedFormStyles)(MorphForm)

@@ -1464,32 +1464,53 @@
 ta.categories)%7D%0A
+              &nbsp;%0A
             %3C/di
@@ -1504,32 +1504,32 @@
          %3C/div%3E%0A
-
           %3C/div%3E
@@ -2275,32 +2275,53 @@
 .rewriteRules)%7D%0A
+              &nbsp;%0A
             %3C/di
@@ -3086,32 +3086,53 @@
 .soundChanges)%7D%0A
+              &nbsp;%0A
             %3C/di
@@ -3820,32 +3820,32 @@
 extAreaSpacer%7D%3E%0A
-
               %7Bj
@@ -3861,32 +3861,53 @@
 .data.lexicon)%7D%0A
+              &nbsp;%0A
             %3C/di

Handle new lines in input better