import React, { ChangeEvent } from 'react'

import Collapsible from 'react-collapsible'
import Input from './Input'
import TextAreaInput from './TextAreaInput'
import Select from './Select'
import { IDocProps } from '../interfaces/IDocProps'

//import './LetterOptions.css';

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

interface IProps extends IDocProps {
  onChange: (name: string, event: ChangeEvent<{ value: string }>) => void
}

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

  return (
    <div className="grid grid-cols-6 gap-6 px-4 py-5 bg-white sm:p-6">
      <div className="col-span-3">
        <Select
          name="letterOption"
          text="Vorlage"
          onchange={props.onChange}
          value={props.letterOption}
          options={letterOptionTypes}
        />
      </div>
      <div className="col-span-3">
        <TextAreaInput
          name="address"
          text="Adresse"
          placeholder={EXAMPLE_ADDRESS}
          onchange={props.onChange}
          value={props.address}
          styles="h-20 col-span-2"
        />
      </div>
      <div className="col-span-3">
        <Input
          name="subject"
          text="Betreff"
          placeholder="Betreffzeile"
          onchange={props.onChange}
          value={props.subject}
        />
      </div>
      <div className="col-span-6">
        <TextAreaInput
          name="body"
          text="Brieftext"
          onchange={props.onChange}
          placeholder="Inhalt des Briefes"
          value={props.body}
        />
      </div>
      <div className="col-span-3">
        <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>
      </div>
      <div className="col-span-3">
        <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>
      </div>
    </div>
  )
}