import React from 'react';

import Collapsible from 'react-collapsible';
import Input from './Input';
import TextAreaInput from './TextAreaInput';
import Select from './Select';

//import './LetterOptions.css';

const EXAMPLE_ADDRESS = 'Max Mustermann\nMusterstr. 73\n12345 Musterstadt';

export default function(props) {
  const templateTypeOptions = [
    {
      value: 'brief-fam',
      name: 'Familie'
    },
    {
      value: 'brief-valerie',
      name: 'Valerie'
    },
    {
      value: 'brief-rain',
      name: 'Rain Baumeister'
    },
    {
      value: 'brief-thomas',
      name: 'Thomas'
    }
  ];

  return (
    <div className="letter-options">
      <Select
        name="template"
        text="Vorlage"
        onchange={props.onChange}
        value={props.template}
        options={templateTypeOptions}
      />

      <TextAreaInput
        name="address"
        text="Adresse"
        placeholder={EXAMPLE_ADDRESS}
        onchange={props.onChange}
        value={props.address}
      />
      <Input
        name="subject"
        text="Betreff"
        placeholder="Betreffzeile"
        onchange={props.onChange}
        value={props.subject}
      />
      <Collapsible trigger="Bezugszeichenzeile">
        <Input
          name="yourRef"
          text="Ihr Zeichen"
          onchange={props.onChange}
          value={props.yourRef}
        />
        <Input
          name="yourMail"
          text="Ihr Schreiben vom"
          onchange={props.onChange}
          value={props.yourMail}
        />
        <Input
          name="myRef"
          text="Unser Zeichen"
          onchange={props.onChange}
          value={props.myRef}
        />
        <Input
          name="customer"
          text="Kundernummer"
          onchange={props.onChange}
          value={props.customer}
        />
        <Input
          name="invoice"
          text="Rechnung"
          onchange={props.onChange}
          value={props.invoice}
        />
      </Collapsible>
      <Collapsible trigger="Sonstige Einstellungen">
        <Input
          name="date"
          text="Datum"
          placeholder="Heute"
          onchange={props.onChange}
          value={props.date}
        />
        <Input
          name="opening"
          text="Eröffnung"
          placeholder="Sehr geehrte Damen und Herren"
          onchange={props.onChange}
          value={props.opening}
        />
        <Input
          name="closing"
          text="Grußform"
          placeholder="Mit freundlichen Grüßen"
          onchange={props.onChange}
          value={props.closing}
        />
        <Input
          name="specialMail"
          text="Versandhinweis"
          onchange={props.onChange}
          value={props.specialMail}
        />
      </Collapsible>
      <TextAreaInput
        name="body"
        text="Brieftext"
        onchange={props.onChange}
        placeholder="Inhalt des Briefes"
        value={props.body}
      />
    </div>
  );
};