import { Component, h } from 'preact';
import PDF from 'react-pdf';

import Input from '../components/Input';
import TextAreaInput from '../components/TextAreaInput';
import Button from '../components/Button';
import Preview from '../components/Preview';

import {generatePdf} from '../../apiHelper';

class Home extends Component {
    render(props) {
        const component = this;
        return (
            <div>
                <TextAreaInput
                    name="address"
                    text="Adresse"
                    onchange={this._onChange.bind(this)}
                    value={props.address}
                />
                <Input
                    name="subject"
                    text="Betreff"
                    onchange={this._onChange.bind(this)}
                    value={props.subject}
                />
                <Button onClick={this._onGenerate.bind(this)} text="Generiere"/>
                <Preview pdfUrl={this.state.pdfUrl} />
            </div>
        );
    }

    _onGenerate() {
        generatePdf(this.state)
            .then((data) => {
                const {id} = data;
                this.setState({
                    pdfUrl: `//localhost:5000/pdf/${id}`
                });
            })
            .catch((error) => {
                this.setState({
                    pdfUrl: null
                });
            });
    }

    _onChange(name, event) {
        if (!name) {
            return;
        }
        const value = event && event.target && event.target.value;
        this.setState({[name]: value || null})
    }

}

export default Home;