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

//import './App.css';

class App extends Component {
  componentDidMount() {
    this._getLatest();
  }

  render() {
    const state = this.state || {};

    return (
      <div className="home">
        <div>
          <LetterOptions onChange={this._onChange.bind(this)} {...state.options}/>
          <LatestList latest={state.latest} onSelect={this._onSelectLatest.bind(this)}
            onRemove={this._onRemoveLatest.bind(this)}
          />
        </div>
        <div>
          <div>
            <Button onClick={this._onGenerate.bind(this)}>Backe PDF</Button>
            <Button onClick={this._onClear.bind(this)}>Alles Löschen</Button>
          </div>
          <Preview
            pdfUrl={state.pdfUrl}
            pdfIsLoading={state.pdfIsLoading}
            pdfError={state.pdfError}
          />
        </div>
      </div>
    );
  }

  _onSelectLatest(selectedOptions) {
    this.setState({options: Object.assign({}, selectedOptions)});
  }

  _onRemoveLatest(item) {
    removeLatest(item)
      .then(() => {
        const latest = this.state.latest
          .filter(curr => curr.id !== item.id);

        this.setState({ latest });
      });
  }

  _onClear() {
    window.location.reload();
  }

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

    generatePdf(state.options)
      .then((data) => {
        const {id} = data;
        this.setState({
          pdfIsLoading: false,
          pdfUrl: `/api/pdf/${id}`
        });
      })
      .catch((error) => {
        this.setState({
          pdfIsLoading: false,
          pdfError: error.message,
          pdfUrl: null
        });
      })
      .then(() => this._getLatest())
  }

  _getLatest() {
    getLatest()
      .then(latest => this.setState({latest}))
      .catch(err => console.error('Unable to get latest:', err));
  }

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

export default App;