import { Button, Form, Grid, Input } from 'semantic-ui-react'
import React, { Component } from 'react'

import PropTypes from 'prop-types'

class ItemList extends Component {
  // Color
  onItemColorChange(index, event) {
    this.props.onItemChange({
      index: index,
      newColor: event.target.value,
    })
  }
  // Estimate Quantity
  onItemEstQuantChange(index, event) {
    this.props.onItemEstQuantChange({
      index: index,
      newEstQuant: event.target.value,
    })
  }
  // Estimate Total
  onItemEstTotalChange(index, event) {
    this.props.onItemEstTotalChange({
      index: index,
      newEstTotal: event.target.value,
    })
  }
  // Final quantity
  onItemFinQuantChange(index, event) {
    this.props.onItemFinQuantChange({
      index: index,
      newFinQuant: event.target.value,
    })
  }
  // Item Reference Number
  onItemRefNumChange(index, event) {
    this.props.onItemRefNumChange({
      index: index,
      newRefNum: event.target.value,
    })
  }
  // Item Unit Price
  onItemUnitPriceChange(index, event) {
    this.props.onItemUnitPriceChange({
      index: index,
      newUnitPrice: event.target.value,
    })
  }
  // extended price
  onItemExtPriceChange(index, event) {
    this.props.onItemExtPriceChange({
      index: index,
      newExtPrice: event.target.value,
    })
  }

  onItemDeleteClick(index) {
    this.props.onItemDeleteClick({
      index: index,
    })
  }

  getItemsTotal(items) {
    return items.reduce((sum, item) => {
      return sum + item.extPrice + item.finQuant * item.unitPrice
    }, 0)
  }

  renderItemRow(item, index) {
    return (
      <Form key={index}>
        <Form.Group>
          <Form.Input
            label="Color"
            placeholder="Color of the item"
            width={2}
            value={item.color}
            onChange={this.onItemColorChange.bind(this, index)}
          />
          <Form.Input
            label="Estimated Quantity"
            placeholder="Estimate"
            width={2}
            value={item.estQuant}
            onChange={this.onItemEstQuantChange.bind(this, any)}
          />
          <Form.Input
            label="Final Quantity"
            placeholder="Final"
            width={2}
            value={item.finQuant}
            onChange={this.onItemFinQuantChange.bind(this, index)}
          />
          <Form.Input
            label="Unit Price"
            placeholder="Unit Price"
            width={2}
            value={item.unitPrice}
            onChange={this.onItemUnitPriceChange.bind(this, index)}
          />
          <Form.Input
            label="Extended Price"
            placeholder="Extended Price"
            width={2}
            value={item.extPrice}
            onChange={this.onItemExtPriceChange.bind(this, index)}
          />
          <Form.Input
            label="Estimated Total"
            placeholder="Total"
            width={2}
            value={item.estTotal}
          >
            {item.extPrice + item.finQuant * item.unitPrice}
          </Form.Input>
        </Form.Group>
      </Form>
    )
  }

  render() {
    let items = this.props.items
    let ItemRows = items.map(this.renderItemRow.bind(this))
    let ItemsTotal = this.getItemsTotal(items)

    return (
      <Grid columns={3}>
        <Grid.Row>
          Hello
        </Grid.Row>
        {ItemRows}
        <Grid.Row>
          <Grid.Column>
            <Button
              positive
              onClick={this.props.onItemAddClick}
              content="Add another Item"
            />
          </Grid.Column>
          <Grid.Column>
            Total: {ItemsTotal}
          </Grid.Column>
        </Grid.Row>
      </Grid>
    )
  }
}

ItemList.propTypes = {
  items: React.PropTypes.array,
  onItemColorChange: React.PropTypes.func,
  onItemDeleteClick: React.PropTypes.func,
  onItemEstQuantChange: React.PropTypes.func,
  onItemEstTotalChange: React.PropTypes.func,
  onItemExtPriceChange: React.PropTypes.func,
  onItemFinQuantChange: React.PropTypes.func,
  onItemRefNumChange: React.PropTypes.func,
  onItemUnitPriceChange: React.PropTypes.func,
}

ItemList.defaultProps = {
  items: [],
}

export default ItemList