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

import LetterOptions from '../components/LetterOptions';
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 className="home">
                <div>
                    <LetterOptions onChange={this._onChange.bind(this)} />
                    <Button onClick={this._onGenerate.bind(this)} text="Generiere"/>
                </div>
                <div>
                    <Preview
                        pdfUrl={this.state.pdfUrl}
                        pdfIsLoading={this.state.pdfIsLoading}
                        pdfError={this.state.pdfError}
                    />
                </div>
            </div>
        );
    }

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

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

}

export default Home;