import React from 'react';
import AssetCollection from './components/AssetCollection';
import Form from './components/Form';
import DataStore from './DataStore';
import 'bootstrap/dist/css/bootstrap.css';
import './css/App.css';

const timeout = 10 * 60000;

export default class App extends React.Component {
  constructor() {
    super();

    this.handler = this.handler.bind(this);
    this.callback = this.callback.bind(this);
    
    let data = DataStore.getData('data') || { timestamp: '', data: [] }
    let assets = DataStore.getData('assets') || [];   
    let currency = DataStore.getData('selectedCurrency') || 'eur'; 
    
    this.state = {
      assets: assets,
      data: data,
      selectedCurrency: currency
    }
  }

  handler(type, asset) {
    if (type === 'ADD' && asset.hasOwnProperty('symbol') && asset.hasOwnProperty('name') && asset.hasOwnProperty('amount')) {
      let assets = DataStore.getData('assets').slice()
      assets.push(asset);
      this.setState({assets: assets});
    } else if (type === 'REMOVE') {
      let assets = this.state.assets.filter((item) => item.id !== asset.props.id);
      this.setState({assets: assets});
    }
  }

  callback(error, response) {
    if (!error) {
      // Update state with new data
      this.setState({data: {
        timestamp: Date.now(),
        data: response
      }});
    
      // Store new data in localStorage
      DataStore.storeData('data', this.state.data);
    }

    // Subscribe to data
    setTimeout(() => {
      DataStore.fetchData(this.state.data, this.callback)
    }, timeout);
  }

  selectedCurrency(event) {
    let currency = event.target.value;
    if (currency !== this.state.selectedCurrency) {
      this.setState({selectedCurrency: currency});
      DataStore.storeData('selectedCurrency', currency);
    }
  }

  componentDidMount() {
    // Check if data is stored in localStorage
    let storedData = DataStore.getData('data');

    if (storedData) {
      this.setState({data: storedData});
    }

    // Fetch data
    DataStore.fetchData(this.state.data, this.callback);
  }

  componentDidUpdate() {
    DataStore.storeData('assets', this.state.assets);
  }

  render() {
    return (
        <div className="container app">
          <div className="col-xs-12">
            <div className="row">
              <h1>t5r</h1>
              <h2>Cryptocurrency assets</h2>
              <hr className="half-rule" />
            </div>
          </div>
          {this.state.assets.length > 0 ? <AssetCollection assets={this.state.assets} data={this.state.data} currency={this.state.selectedCurrency} handler={this.handler} /> : null }
          <form id="currencyForm">
            <div className="radio">
              <label><input type="radio" name="currencyradio" value="eur" onChange={this.selectedCurrency.bind(this)} checked={this.state.selectedCurrency === 'eur'}/> EUR</label>
            </div>
            <div className="radio">
              <label><input type="radio" name="currencyradio" value="usd" onChange={this.selectedCurrency.bind(this)} checked={this.state.selectedCurrency === 'usd'}/> USD</label>
            </div>
          </form>
          <Form handler={this.handler} />
        </div>
      );
  }
}