import { h } from 'preact';
import Collapsible from 'react-collapsible';
import Input from './Input';
import TextAreaInput from './TextAreaInput';
import Select from './Select';

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>
            <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="customer"
                    text="Kundernummer"
                    onchange={props.onChange}
                    value={props.customer}
                />
                <Input
                    name="invoice"
                    text="Rechnung"
                    onchange={props.onChange}
                    value={props.invoice}
                />
                <Input
                    name="yourMail"
                    text="Ihr Schreiben vom"
                    onchange={props.onChange}
                    value={props.yourMail}
                />
            </Collapsible>
            <Collapsible trigger="Sonstige Einstellungen">
                <Input
                    name="date"
                    text="Datum"
                    placeholder="Heute"
                    onchange={props.onChange}
                    value={props.date}
                />
                <Input
                    name="opening"
                    text="Anrede"
                    placeholder="Sehr geehrte Damen und Herren"
                    onchange={props.onChange}
                    value={props.opening}
                />
                <Input
                    name="closing"
                    text="Grußformel"
                    placeholder="Mit freundlichen Grüßen"
                    onchange={props.onChange}
                    value={props.closing}
                />
            </Collapsible>
            <TextAreaInput
                name="body"
                text="Brieftext"
                onchange={props.onChange}
                placeholder="Inhalt des Briefes"
                value={props.body}
            />
        </div>
    );
};