# Controls the survey details view

DateFormat = require 'components/ui/date-format'
LineChart = require 'components/chartist/line-chart'
PieChartWithTable = require 'components/metrics/widget-pie-chart-with-table'
BarChartWithTable = require 'components/metrics/widget-bar-chart-with-table'
LineChartPreview = require 'components/metrics/widget-line-chart-preview'
SelectedChart = require 'components/metrics/metrics-selected-chart'
Moment = require 'moment'

module.exports = React.createClass

  displayName: 'Metrics'

  getDefaultProps: ->

  getInitialState: ->
    installData: null
    sessionData: null
    avgSessionData: null
    pageViewsData: null
    pageViewPerSessionData: null
    actionsData: null
    actionsPerSession: null
    registeredUsersData: null
    topGraphData: null

  series: (min, max) ->
    numbers = []
    i = Moment(@props.rangeStart)
    while i <= Moment(@props.rangeEnd)
      numbers.push(Math.floor(Math.random() * (max - min + 1)) + min)
      i = Moment(i).add(1, 'd')
    return [numbers]

  labels: ->
    labels = []
    i = Moment(@props.rangeStart)
    while i <= Moment(@props.rangeEnd)
      labels.push Moment(i).format('M/D/YY')
      i = Moment(i).add(1, 'd')
    return labels

  componentWillMount: ->

    @setState installData:
      title: 'Installs'
      labels: @labels()
      series: @series(20, 70)
      sumDisplay: 'total'

    @setState sessionsData:
      title: 'Sessions'
      labels: @labels()
      series: @series(20, 70)
      sumDisplay: 'total'

    @setState avgSessionsData:
      title: 'Avg. Sessions'
      labels: @labels()
      series: @series(20, 70)
      sumDisplay: 'average'

    @setState pageViewsData:
      title: 'Page Views'
      labels: @labels()
      series: @series(20, 70)
      sumDisplay: 'total'

    @setState pageViewsPerSessionData:
      title: 'Page Views Per Session'
      labels: @labels()
      series: @series(20, 70)
      sumDisplay: 'average'

    @setState actionsData:
      title: 'Actions'
      labels: @labels()
      series: @series(20, 70)
      sumDisplay: 'total'

    @setState actionsPerSessionData:
      title: 'Actions Per Session'
      labels: @labels()
      series: @series(20, 70)
      sumDisplay: 'average'

    @setState registeredUsersData:
      title: 'Registered Users'
      labels: @labels()
      series: @series(20, 70)
      sumDisplay: 'total'

    @setState osInstallData:
      title: 'Installs By OS'
      labels: ['iOS', 'Android', 'Mobile Web', 'Desktop Web', 'Other']
      series: [60, 20, 10, 5, 5]

    @setState osSessionData:
      title: 'Total Sessions By OS'
      labels: ['iOS', 'Android', 'Mobile Web', 'Desktop Web', 'Other']
      series: [8302, 5056, 1024, 256, 187]

    @setState osAvgDurationData:
      title: 'Avg. Session Duration By OS'
      labels: ['iOS', 'Android', 'Mobile Web', 'Desktop Web', 'Other']
      series: [9000, 7000, 5000, 3000, 1000]

    @setState downloadMethodsData:
      title: 'Download Method of Origin'
      labels: ['Link', 'Scan', 'Search', 'Discover', 'Bundled']
      series: [40, 20, 20, 10, 10]

  handleSelectChart: (selectedChartData) ->
    @setState selectedChartData: selectedChartData

  render: ->

    console.log(@props.minDate)

    <DocumentTitle title='Survey Summary'>
      <div className="l-v-spaced" ref="width">

        <SelectedChart
          data={@state.selectedChartData || @state.installData}
        />

        <div className="hor">
          <div className="hor_title">Click in for more detail</div>
        </div>

        <ul className="met_grid">
          <LineChartPreview
            data={@state.installData}
            selected={@state.selectedChartData}
            handleSelectChart={@handleSelectChart}
          />
          <LineChartPreview
            data={@state.sessionsData}
            selected={@state.selectedChartData}
            handleSelectChart={@handleSelectChart}
          />
          <LineChartPreview
            data={@state.avgSessionsData}
            selected={@state.selectedChartData}
            handleSelectChart={@handleSelectChart}
          />
          <LineChartPreview
            data={@state.pageViewsData}
            selected={@state.selectedChartData}
            handleSelectChart={@handleSelectChart}
          />
          <LineChartPreview
            data={@state.pageViewsPerSessionData}
            selected={@state.selectedChartData}
            handleSelectChart={@handleSelectChart}
          />
          <LineChartPreview
            data={@state.actionsData}
            selected={@state.selectedChartData}
            handleSelectChart={@handleSelectChart}
          />
          <LineChartPreview
            data={@state.actionsPerSessionData}
            selected={@state.selectedChartData}
            handleSelectChart={@handleSelectChart}
          />
          <LineChartPreview
            data={@state.registeredUsersData}
            selected={@state.selectedChartData}
            handleSelectChart={@handleSelectChart}
          />
        </ul>

        <div className="hor">
          <div className="hor_title">Insights</div>
        </div>

        <ul className="met_grid">
          <li className="met_item_thirds is-selected">
            <PieChartWithTable data={@state.osInstallData} />
          </li>
          <li className="met_item_thirds is-selected">
            <BarChartWithTable data={@state.osSessionData} />
          </li>
          <li className="met_item_thirds is-selected">
            <BarChartWithTable data={@state.osAvgDurationData} />
          </li>
          <li className="met_item_thirds is-selected">
            <PieChartWithTable data={@state.downloadMethodsData} />
          </li>
        </ul>




      </div>
    </DocumentTitle>