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

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

function toBase64(arrayBuffer) {
    return btoa(String.fromCharCode(...new Uint8Array(arrayBuffer)));
}

class Home extends Component {
    render(props) {
        return (
            <div>
                <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>
        );
    }

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

    _onGenerate(name, event){
        var component = this;

        fetch('//localhost:5000/pdf/generate/brief', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(this.state)
        }).then(function(res) {
            if (res.status !== 200) {
                console.log('request failed');
                return;
            }
            return res.json();
        }).then(function(data) {
            const {id} = data;
            component.setState({
                pdfUrl: `//localhost:5000/pdf/${id}`
            });
        }).catch(function(error) {
            component.setState({
                pdfUrl: null
            })
        });
    }
}

export default Home;