import React, { PropTypes } from 'react'
import { FormControl, ControlLabel } from 'react-bootstrap'
import Textarea from 'react-textarea-autosize'
import { observer, inject } from 'mobx-react'
import compose from 'recompose/compose'

import regularStyles from './areaRechtsmittel.css'
import pdfStyles from './areaRechtsmittelPdf.css'
import DateField from './DateField'
import createOptions from '../../src/createOptions'

const enhance = compose(inject('store'), observer)

const AreaRechtsmittel = ({ store, nrOfFieldsBeforePv, change, blur, onChangeDatePicker }) => {
  const {
    activeId,
    geschaeftePlusFilteredAndSorted: geschaefte,
    rechtsmittelErledigungOptions,
    rechtsmittelInstanzOptions,
  } = store.geschaefte
  const path = store.history.location.pathname
  const isPrintPreview = path === '/geschaeftPdf'
  const geschaeft = geschaefte.find(g => g.idGeschaeft === activeId) || {}
  const styles = isPrintPreview ? pdfStyles : regularStyles

  return (
    <div className={styles.areaForGeschaeftsart}>
      <div className={styles.areaRechtsmittelTitle}>Rekurs / Beschwerde</div>
      {!(isPrintPreview && !geschaeft.rechtsmittelInstanz) && (
        <div className={styles.fieldInstanz}>
          <ControlLabel>Instanz</ControlLabel>
          <FormControl
            componentClass="select"
            value={geschaeft.rechtsmittelInstanz || ''}
            name="rechtsmittelInstanz"
            onChange={change}
            bsSize="small"
            tabIndex={1 + nrOfFieldsBeforePv}
          >
            {createOptions(rechtsmittelInstanzOptions)}
          </FormControl>
        </div>
      )}
      {!(isPrintPreview && !geschaeft.rechtsmittelEntscheidNr) && (
        <div className={styles.fieldEntscheidNr}>
          <ControlLabel>Entscheid Nr.</ControlLabel>
          <FormControl
            type="text"
            value={geschaeft.rechtsmittelEntscheidNr || ''}
            name="rechtsmittelEntscheidNr"
            onChange={change}
            onBlur={blur}
            bsSize="small"
            tabIndex={2 + nrOfFieldsBeforePv}
          />
        </div>
      )}
      {!(isPrintPreview && !geschaeft.rechtsmittelEntscheidDatum) && (
        <div className={styles.fieldEntscheidDatum}>
          <DateField
            name="rechtsmittelEntscheidDatum"
            label="Entscheid Datum"
            change={change}
            blur={blur}
            onChangeDatePicker={onChangeDatePicker}
            tabIndex={3 + nrOfFieldsBeforePv}
          />
        </div>
      )}
      {!(isPrintPreview && !geschaeft.rechtsmittelErledigung) && (
        <div className={styles.fieldErledigung}>
          <ControlLabel>Erledigung</ControlLabel>
          <FormControl
            componentClass="select"
            value={geschaeft.rechtsmittelErledigung || ''}
            name="rechtsmittelErledigung"
            onChange={change}
            bsSize="small"
            tabIndex={4 + nrOfFieldsBeforePv}
          >
            {createOptions(rechtsmittelErledigungOptions)}
          </FormControl>
        </div>
      )}
      {!(isPrintPreview && !geschaeft.rechtsmittelTxt) && (
        <div className={styles.fieldRechtsmittelTxt}>
          <ControlLabel>Bemerkungen</ControlLabel>
          <Textarea
            value={geschaeft.rechtsmittelTxt || ''}
            name="rechtsmittelTxt"
            onChange={change}
            onBlur={blur}
            tabIndex={5 + nrOfFieldsBeforePv}
            className={styles.textarea}
          />
        </div>
      )}
    </div>
  )
}

AreaRechtsmittel.displayName = 'AreaRechtsmittel'

AreaRechtsmittel.propTypes = {
  store: PropTypes.object.isRequired,
  nrOfFieldsBeforePv: PropTypes.number.isRequired,
  change: PropTypes.func.isRequired,
  blur: PropTypes.func.isRequired,
  onChangeDatePicker: PropTypes.func.isRequired,
}

export default enhance(AreaRechtsmittel)

@@ -226,16 +226,55 @@
 compose'
+%0Aimport styled from 'styled-components'
 %0A%0Aimport
@@ -540,15 +540,19 @@
 = (%7B
+%0A 
  store,
+%0A 
  nrO
@@ -571,16 +571,18 @@
 ePv,
+%0A 
  change,
  blu
@@ -581,14 +581,18 @@
 nge,
+%0A 
  blur,
+%0A 
  onC
@@ -606,17 +606,18 @@
 tePicker
- 
+,%0A
 %7D) =%3E %7B%0A
@@ -837,27 +837,18 @@
 onst isP
-rintPreview
+df
  = path 
@@ -962,27 +962,18 @@
 es = isP
-rintPreview
+df
  ? pdfSt
@@ -1141,35 +1141,26 @@
       %7B!(isP
-rintPreview
+df
  && !geschae
@@ -1663,35 +1663,26 @@
       %7B!(isP
-rintPreview
+df
  && !geschae
@@ -2141,35 +2141,26 @@
       %7B!(isP
-rintPreview
+df
  && !geschae
@@ -2546,35 +2546,26 @@
       %7B!(isP
-rintPreview
+df
  && !geschae
@@ -3094,19 +3094,10 @@
 (isP
-rintPreview
+df
  && 

use styled