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

import ItemList from './ItemList'
import PropTypes from 'prop-types'
import withData from '../hocs/withData'

export default class Invoices extends Component {
  constructor() {
    super()
    this.state = {
      items: [],
    }
    this.onFieldValueChange = this.onFieldValueChange.bind(this)
    this.onItemColorChange = this.onItemColorChange.bind(this)
    this.onItemDeleteClick = this.onItemDeleteClick.bind(this)
    this.onItemEstQuantChange = this.onItemEstQuantChange.bind(this)
    this.onItemEstTotalChange = this.onItemEstTotalChange.bind(this)
    this.onItemExtPriceChange = this.onItemExtPriceChange.bind(this)
    this.onItemFinQuantChange = this.onItemFinQuantChange.bind(this)
    this.onItemRefNumChange = this.onItemRefNumChange.bind(this)
    this.onItemUnitPriceChange = this.onItemUnitPriceChange.bind(this)
    this.onExampleLinkClick = this.onExampleLinkClick.bind(this)
  }

  onFieldValueChange(propertyName, event) {
    let newVal = event.target.value
    let stateUpdate = {}
    stateUpdate[propertyName] = newVal
    this.setState(stateUpdate)
  }

  onItemColorChange(params) {
    let items = this.state.items
    let item = items[params.index]
    item.color = params.newColor
    this.setState({
      items: items,
    })
  }

  onItemEstQuantChange(params) {
    let items = this.state.items
    let item = items[params.index]
    item.estQuant = params.newEstQuant
    this.setState({
      items: items,
    })
  }

  onItemEstTotalChange(params) {
    let items = this.state.items
    let item = items[params.index]
    item.estTotal = params.newEstTotal
    this.setState({
      items: items,
    })
  }

  onItemExtPriceChange(params) {
    let items = this.state.items
    let item = items[params.index]
    item.extPrice = params.newExtPrice
    this.setState({
      items: items,
    })
  }

  onItemFinQuantChange(params) {
    let items = this.state.items
    let item = items[params.index]
    item.finQuant = params.newFinQuant
    this.setState({
      items: items,
    })
  }

  onItemRefNumChange(params) {
    let items = this.state.items
    let item = items[params.index]
    item.refNum = params.newRefNum
    this.setState({
      items: items,
    })
  }

  onItemUnitPriceChange(params) {
    let items = this.state.items
    let item = items[params.index]
    item.unitPrice = params.newUnitPrice
    this.setState({
      items: items,
    })
  }

  onItemDeleteClick(params) {
    let items = this.state.items
    items.splice(params.index, 1)
    this.setState({
      items: items,
    })
  }

  onItemAddClick() {
    let items = this.state.items
    items.push({
      refNum: '',
      color: '',
      estQuant: '',
      finQuant: '',
      unitPrice: '',
      extPrice: '',
      estTotal: '',
    })
    this.setState({
      items: items,
    })
  }

  render() {
    return (
      <div>
        <Grid columns={1}>
          <Grid.Row>
            <Grid.Column>
              <ItemList
                items={this.state.items}
                onItemAddClick={this.onItemAddClick}
                onItemColorChange={this.onItemColorChange}
                onItemDeleteClick={this.onItemDeleteClick}
                onItemEstQuantChange={this.onItemEstQuantChange}
                onItemEstTotalChange={this.onItemEstTotalChange}
                onItemExtPriceChange={this.onItemExtPriceChange}
                onItemFinQuantChange={this.onItemFinQuantChange}
                onItemRefNumChange={this.onItemRefNumChange}
                onItemUnitPriceChange={this.onItemUnitPriceChange}
              />
            </Grid.Column>
            <Grid.Column>
              <a onClick={this.onExampleLinkClick}>Click here</a>
            </Grid.Column>
          </Grid.Row>
        </Grid>
      </div>
    )
  }
}