// @flow

import React from 'react';
import { render } from 'react-dom'
import { Router, Route, hashHistory } from 'react-router'

class Menu extends React.Component {
  render() {
    return <div><a href="/#/">Customers</a><a href="/#/about">About</a></div>;
  }
}

class About extends React.Component {
  render() {
    return <div><p>Dette er en liten webapp som kan legge til, endre og fjerne customers</p></div>;
  }
}

class CustomerService {
  static instance=null;
  lastId=0;
  customers=[];

  // Return singleton
  static get() {
    if(!this.instance)
      this.instance=new CustomerService();
    return this.instance;
  }

  constructor() {
    this.customers.push({id: ++this.lastId, name: "Ola", city: "Trondheim"});
    this.customers.push({id: ++this.lastId, name: "Kari", city: "Oslo"});
    this.customers.push({id: ++this.lastId, name: "Per", city: "Tromsø"});
  }

  // Returns a manually created promise since we are later going to use fetch(),
  // which also returns a promise, to perform an http request.
  getCustomers() {
    return new Promise((resolve, reject)=>{
      var customer_id_and_names=[];
      for(var c=0;c<this.customers.length;c++) {
        customer_id_and_names.push({id: this.customers[c].id, name: this.customers[c].name});
      }
      resolve(customer_id_and_names);
    });
  }

  getCustomer(customerId) {
    return new Promise((resolve, reject)=>{
      for(var c=0;c<this.customers.length;c++) {
        if(this.customers[c].id==customerId) {
          resolve(this.customers[c]);
          return;
        }
      }
      reject("Customer not found");
    });
  }

  addCustomer(name, city) {
    return new Promise((resolve, reject)=>{
      if(name && city) {
        this.customers.push({id: ++this.lastId, name: name, city: city});
        resolve(this.lastId);
        return;
      }
      reject("name or city empty");
    });
  }

  editCustomer(id, name, city) {
    return new Promise((resolve, reject)=>{
      if(id && name && city) {
        for(var c=0;c<this.customers.length;c++) {
          if (this.customers[c].id==id){
            this.customers[c].name = name;
            this.customers[c].city = city;
            resolve(id);
            return;
          }
        }
      }
      reject("Coudn't edit customer");
    });
  }

  removeCustomer(customerName) {
    return new Promise((resolve, reject)=>{
      for(var c=0;c<this.customers.length;c++) {
        if(this.customers[c].name.toLowerCase()==customerName.toLowerCase()) {
          this.customers.splice(c,1);
          resolve(c);
          return;
        }
      }
      reject("Customer not found");
    });
  }
}

class CustomerListComponent extends React.Component {
  state={status: "", customers: [], newCustomerName: "", newCustomerCity: ""}

  constructor() {
    super();

    CustomerService.get().getCustomers().then((result)=>{
      this.setState({status: "successfully loaded customer list", customers: result});
    }).catch((reason)=>{
      this.setState({status: "error: "+reason});
    });
  }

  // Event methods, which are called in render(), are declared as properties:
  onNewCustomerFormChanged = (event) => {
    this.setState({[event.target.name]: event.target.value});
  }

  // Event methods, which are called in render(), are declared as properties:
  onNewCustomer = (event) => {
    event.preventDefault();
    var name=this.state.newCustomerName;
    var city=this.state.newCustomerCity;
    CustomerService.get().addCustomer(name, city).then((result)=>{
      this.state.customers.push({id: result, name: name, city});
      this.setState({status: "successfully added new customer", customers: this.state.customers, newCustomerName: "", newCustomerCity: ""});
    }).catch((reason)=>{
      this.setState({status: "error: "+reason});
    });
  }

  onDeleteCustomerFormChanged = (event) => {
    this.setState({[event.target.name]: event.target.value});
  }

  onDeleteCustomer = (event) => {
      event.preventDefault();
      var name=this.state.removeCustomerName;
      CustomerService.get().removeCustomer(name).then((result)=>{
        this.state.customers.splice(result,1);
        this.setState({status: "successfully removed customer", customers: this.state.customers, newCustomerName: "", newCustomerCity: ""});
      }).catch((reason)=>{
        this.setState({status: "error: "+reason});
      })
  }

  render() {
    var listItems = this.state.customers.map((customer) =>
      <li key={customer.id}><a href={"/#/customer/"+customer.id}>{customer.name}</a></li>
    );
    return <div><p className={'status'} >status: {this.state.status}</p><ul>{listItems}</ul>
        <form onSubmit={this.onNewCustomer} onChange={this.onNewCustomerFormChanged}>
          <label>Name:<input type="text" name="newCustomerName" value={this.state.newCustomerName} /></label>
          <label>City:<input type="text" name="newCustomerCity" value={this.state.newCustomerCity} /></label>
          <input type="submit" value="New Customer"/>
        </form>
        <form onSubmit={this.onDeleteCustomer} onChange={this.onDeleteCustomerFormChanged}>
          <label>Name:<input type="text" name="removeCustomerName" value={this.state.removeCustomerName} /></label>
          <input type="submit" value="Remove Customer"/>
        </form>
      </div>
  }
}

class CustomerDetailsComponent extends React.Component {
  state={status: "", customer: {}}

  constructor(props) {
    super(props);

    CustomerService.get().getCustomer(props.params.customerId).then((result)=>{
      this.setState({status: "successfully loaded customer details", customer: result});
      var name = this.state.customer.name;
      var city = this.state.customer.city;
      this.setState({status: "successfully populated input field", editCustomerName: name, editCustomerCity: city});
    }).catch((reason)=>{
      this.setState({status: "error: "+reason});
    });
  }

  onUpdateCustomer = (event)=>{
    event.preventDefault();
    var id=this.state.customer.id;
    var name=this.state.editCustomerName;
    var city=this.state.editCustomerCity;
    CustomerService.get().editCustomer(id, name, city).then((result)=>{
      this.setState({status: "successfully loaded customer details", customer: result});
    }).catch((reason)=>{
      this.setState({status: "error: "+reason});
    });
  }

  onEditCustomerNameChange(e) {
    this.setState({ editCustomerName: e.target.value });
  }

  onEditCustomerCityChange(e) {
    this.setState({ editCustomerCity: e.target.value });
  }

  render() {
    return <div>status: {this.state.status}<br/>
      <form onSubmit={this.onUpdateCustomer}>
        <label>Name:<input type="text" name="editCustomerName" value={this.state.editCustomerName} onChange={ this.onEditCustomerNameChange.bind(this) } /></label>
        <label>City:<input type="text" name="editCustomerCity" value={this.state.editCustomerCity} onChange={ this.onEditCustomerCityChange.bind(this) }/></label>
        <input type="submit" value="Edit Customer"/>
      </form>
    </div>
  }
}

class Routes extends React.Component {
  render() {
    return <Router history={hashHistory}>
      <Route exact path="/" component={CustomerListComponent}/>
      <Route path="/customer/:customerId" component={CustomerDetailsComponent}/>
      <Route path="/about" component={About}/>
    </Router>;
  }
}

render(<div>
  <Menu/>
  <Routes/>
</div>, document.getElementById('root'));