import React, { Component } from 'react';
import LetterOptions from './LetterOptions';
import Button from './Button';
import Preview from './Preview';
import {generatePdf} from './apiHelper';

import './App.css';

class App extends Component {
  render() {
    const state = this.state || {};

    return (
      <div className="home">
        <div>
          <LetterOptions onChange={this._onChange.bind(this)} />
        </div>
        <div>
          <Button onClick={this._onGenerate.bind(this)} text="Backe PDF"/>
          <Preview
            pdfUrl={state.pdfUrl}
            pdfIsLoading={state.pdfIsLoading}
            pdfError={state.pdfError}
          />
        </div>
      </div>
    );
  }

  _onGenerate() {
    const state = this.state || {};
    this.setState({
      pdfIsLoading: true,
      pdfError: null
    })

    generatePdf(state)
      .then((data) => {
        const {id} = data;
        this.setState({
          pdfIsLoading: false,
          pdfUrl: `/api/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 || undefined})
  }
}

export default App;