R = React.DOM

# Canvases for charts
PieChartCanvas = React.createClass
  render: ->
    R.canvas
      style: { height: 200, width: 200 }

BarChartCanvas = React.createClass
  render: ->
    R.canvas
      style: { height: 200, width: 400 }

@MovingRecordsApp = React.createClass

  getInitialState: ->
    records: @props.data
    # Remember Chart.js instances so we can delete them later.
    barChartInstance: null
    pieChartInstance: null

  getDefaultProps: ->
    records: []

  addRecord: (record) ->
    records = React.addons.update(@state.records, { $unshift: [record] })
    @setState records: records

  deleteRecord: (record) ->
    index = @state.records.indexOf record
    records = React.addons.update(@state.records, { $splice: [[index, 1]] })
    @replaceState records: records

  updateRecord: (record, newRecord) ->
    index = @state.records.indexOf record
    records = React.addons.update(@state.records, { $splice: [[index, 1, newRecord]] })
    @replaceState records: records

  chartsPanel: ->
    R.div
      className: "panel panel-blue"
      R.div
        className: 'panel-heading'
        R.div
          className: "row"
          R.div
            className: "col-xs-3"
            R.div
              className: "fa fa-home fa-5x"
          R.div
            className: "col-xs-9 text-right"
            R.div
              className: 'huge'
              "Total: #{@totalVolume()}"
            R.div null,
              "cubic feet"
      R.div
        className: 'panel-body'
        R.div
          className: 'row text-center'
          R.div
            className: 'col-sm-6'
            React.createElement BarChartCanvas,
              ref: "bar"
          R.div
            className: 'col-sm-6'
            React.createElement PieChartCanvas,
              ref: "chart"

  totalVolume: ->
    sum = 0
    for obj in @state.records
      sum += (obj.volume * obj.quantity)
    sum

  render: ->
    R.div
      className: "app_wrapper"
      @chartsPanel()

      R.hr null

      R.h2 null, "Add a new item"
      React.createElement NewMovingRecordForm,
        handleNewRecord: @addRecord
        roomSuggestions: @props.roomSuggestions
        categorySuggestions: @props.categorySuggestions
      R.hr null

      React.createElement Records,
        records: @state.records,
        handleDeleteRecord: @deleteRecord,
        handleUpdateRecord: @updateRecord

  # 部品がDOMに搭載された後に、グラフを書く。
  componentDidMount: ->
    @drawCharts()

  # 部品が更新された後に、古いグラフを破壊し新しいグラフを書く。
  componentWillUnmount: ->
    @state.barChartInstance.destroy()
    @state.pieChartInstance.destroy()

  # DOM上のキャンバスを探し、そこにグラフを描画。
  drawCharts: ->
    # 棒グラフ
    canvas = React.findDOMNode(@refs.bar)  # refを手掛かりにキャンバスを探します。
    ctx    = canvas.getContext("2d")       # 絵を書くための場所をゲットします。
    # グラフ用データを渡し、グラフのオブジェクトを作ります。
    # そのオブジェクトを後ほど破壊するためにポインターを保存しておきます。
    @setState.barChartInstance = new Chart(ctx).Bar(@dataForBarChart())

    # 円グラフ
    canvas = React.findDOMNode(@refs.chart)
    ctx    = canvas.getContext("2d")
    @setState.pieChartInstance = new Chart(ctx).Pie(@dataForPieChart())

  dataForPieChart: ->
    [
      {
        value: 300
        color:"#F7464A"
        highlight: "#FF5A5E"
        label: "Red"
      }
      {
        value: 50
        color: "#46BFBD"
        highlight: "#5AD3D1"
        label: "Green"
      }
      {
        value: 100
        color: "#FDB45C"
        highlight: "#FFC870"
        label: "Yellow"
      }
    ]

  dataForBarChart: ->
    labels: ["January", "February", "March", "April", "May", "June", "July"]
    datasets: [
      {
        label: "My First dataset"
        fillColor: "rgba(220,220,220,0.5)"
        strokeColor: "rgba(220,220,220,0.8)"
        highlightFill: "rgba(220,220,220,0.75)"
        highlightStroke: "rgba(220,220,220,1)"
        data: [65, 59, 80, 81, 56, 55, 40]
      }
      {
        label: "My Second dataset"
        fillColor: "rgba(151,187,205,0.5)"
        strokeColor: "rgba(151,187,205,0.8)"
        highlightFill: "rgba(151,187,205,0.75)"
        highlightStroke: "rgba(151,187,205,1)"
        data: [28, 48, 40, 19, 86, 27, 90]
      }
    ]