import _ from 'lodash'
import React, { Component, PropTypes } from 'react'
import moment from 'moment'
import * as d3 from 'd3'
import Paper from 'material-ui/Paper'
import { RadioButton } from 'material-ui/RadioButton'
import RadioButtonGroup from 'material-ui/RadioButton/RadioButtonGroup'

import { Row, Col } from '../../../../../components/Grid/Grid'
import { DateRangeField } from '../../../../../components/FormComponents/FormComponents'
import { FilterBlock } from '../../../../../components/FiltersDialog/FilterComponents'

import Chart from '../../../../../components/Chart/Chart'
import Tooltip from '../../../../../components/Tooltip/Tooltip'

import { FacebookModable } from '../../../../../shared/icons/Facebook'
import { TwitterModable } from '../../../../../shared/icons/Twitter'

import style from './KeywordInTimeIntervals.scss'

import { getSpheresParticularKeyword } from '../../../actions/analysis'

export const SocialMediaRadio = ({ selectedRadio, onChange }) => (
  <div className={style.container}>
      <RadioButtonGroup
        className={style.radioButtonGroup}
        name="postType"
        defaultSelected={selectedRadio}
        onChange={(e, v) => {
          e.stopPropagation()
          onChange(v)
        }}
      >
        <RadioButton value="lastWeek" label="Last week" />
        <RadioButton value="lastMonth" label="Last month" />
        <RadioButton value="lastYear" label="Last year" />
        <RadioButton value="dateRange" label="Date range" />
      </RadioButtonGroup>
  </div>
)

SocialMediaRadio.propTypes = {
  selectedRadio: PropTypes.string.isRequired,
  onChange: PropTypes.func
}

class KeywordInTimeIntervals extends Component {
  constructor (props) {
    super(props)

    this.state = {
      selectedRadio: 'lastWeek',
      dateRange: {
        from: null,
        to: null
      },
      dateErrorText: '',
      tooltip: {
        visible: false,
        x: 0,
        y: 0
      }
    }

    this.onDateChange = this.onDateChange.bind(this)
    this.onRadioChange = this.onRadioChange.bind(this)
    this.getNewData = this.getNewData.bind(this)
    this.giveColor = this.giveColor.bind(this)
    this.onMouseEnter = this.onMouseEnter.bind(this)
    this.onMouseLeave = this.onMouseLeave.bind(this)
  }

  componentWillMount () {
    const {
      props: { dispatch, id },
      state: { selectedRadio, dateRange }
    } = this
    dispatch(getSpheresParticularKeyword(id, selectedRadio, dateRange))
  }

  onDateChange (newState) {
    const { dateRange: { from, to } } = this.state
    const error = (newState.to || to) && (newState.from || from) &&
    moment(newState.to || to).isBefore(moment(newState.from || from))
      ? 'Incorrected date range'
      : ''

    this.setState({
      dateRange: {
        from: newState.from || from,
        to: newState.to || to
      },
      dateErrorText: error
    }, () => this.getNewData())
  }

  onRadioChange (v) {
    this.setState({
      selectedRadio: v
    }, () => this.getNewData())
  }

  getNewData () {
    const {
      props: { dispatch, id },
      state: { selectedRadio, dateRange, dateErrorText }
    } = this
    !dateErrorText.length && dispatch(getSpheresParticularKeyword(id, selectedRadio, dateRange))
  }

  giveColor (data) {
    const color = d3.scaleOrdinal(d3.schemeCategory10)
    return data
      .map(v => ({
          ...v,
          color: color(v.word)
        })
      )
  }

  onMouseEnter (e) {
    e.stopPropagation()
    // console.log('ivent onMouseEnter', this, window)
    this.setState({
      tooltip: {
        visible: true,
        x: e.clientX,
        y: e.clientY
      }
    })
  }

  onMouseLeave (e) {
    e.stopPropagation()
    // console.log('ivent onMouseLeave', this.state)
    this.setState({
      tooltip: {
        visible: false,
        x: 0,
        y: 0
      }
    })
  }

  render () {
    const {
      state: { selectedRadio, dateErrorText, tooltip },
      props: { analysis }
    } = this
    const keywords = this.giveColor(
      analysis.particularKeyword.data.reduce((prev, curr) => {
      const prevBigger = prev.facebookPhraseActivityStats

      const currBigger = curr.facebookPhraseActivityStats.length > curr.twitterPhraseActivityStats.length
        ? curr.facebookPhraseActivityStats
        : curr.twitterPhraseActivityStats

      const prevCurrBigger = currBigger.length > prevBigger.length
        ? currBigger
        : prevBigger
      return {
        facebookPhraseActivityStats: prevCurrBigger
      }
      }, { facebookPhraseActivityStats: [], twitterPhraseActivityStats: [] }).facebookPhraseActivityStats
    )
    console.log(keywords, 'kejwords')
    const { visibility, x: tooltipX, y: tooltipY } = tooltip
    return (
      <Paper className={style.keywordInTimeIntervals}>
        <header className={style.title}>
          Proportion of activities with particular keyword on FB vs on Twitter in time intervals
        </header>
        <Row>
          <Col>
            <SocialMediaRadio
              name="date" selectedRadio={selectedRadio} onChange={this.onRadioChange} />
          </Col>
          <Col n={2}>
            <FilterBlock title="Date range">
              <DateRangeField
                onChange={this.onDateChange}
                errorText={dateErrorText}
                isDisabled={selectedRadio !== 'dateRange'}
                name="dateRange"
                reduxForm={false} />
            </FilterBlock>
          </Col>
          <Col>
            {
              keywords.map((keyword, i) =>
                <div key={i} className={style.keyword}>
                  <svg width="12" height="20" >
                  <rect
                    fill={keyword.color}
                    width={12}
                    height={20}
                    rx={4}
                    ry={4}
                  >
                  </rect>
                  </svg>
                  <span>{keyword.word}</span>
                </div>
              )
            }
          </Col>
        </Row>
        <Row>
          <Col n={4}>
            <Chart
              data={analysis.particularKeyword.data
                .map(v => ({ interval: Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 5), ...v }))}
              width={1200} height={500} padding={30}
              wantedData={['facebookPhraseActivityStats', 'twitterPhraseActivityStats']}
            >
              <BarAnalysis
                keywords={keywords}
                onMouseEnter={this.onMouseEnter}
                onMouseLeave={this.onMouseLeave}
              />
            </Chart>
          </Col>
        </Row>
        <Tooltip
          tooltipVisibility={visibility}
          tooltipY={tooltipY}
          tooltipX={tooltipX}
          color={'red'}
          label={'qwe'}
          categoryValue={'60'}
          percent={60}
        />
      </Paper>
    )
  }
}
KeywordInTimeIntervals.propTypes = {
  id: PropTypes.string,
  analysis: PropTypes.object,
  monitoringStartDate: PropTypes.number
}

export default KeywordInTimeIntervals


const BarAnalysis = ({
  key, x, height, width, onMouseEnter, onMouseLeave, scaleY, bottom, keywords,
  data: { facebookPhraseActivityStats, twitterPhraseActivityStats },
  ...rest
}) => {
  const fPAS = facebookPhraseActivityStats.reduce((prev, curr, i) => {
      const previousHeights = prev.reduce((fprev, fcurr) => fprev + fcurr.props.height, 0)
    const minHeight = height - scaleY(curr.count) > 10 ? height - scaleY(curr.count) : 10
    const newY = i > 0
        ? bottom - minHeight - previousHeights
        : bottom - minHeight
    return [
        ...prev,
        (
          <rect key={i} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}
                fill={keywords.find(v => v.word === curr.word).color} x={x - 11}
                y={newY} height={minHeight} width={width} />
        )
      ]
    }, []
  )

  const tPAS = twitterPhraseActivityStats.reduce((prev, curr, i) => {
    const previousHeights = prev.reduce((tprev, tcurr) => tprev + tcurr.props.height, 0)
    const minHeight = height - scaleY(curr.count) > 10 ? height - scaleY(curr.count) : 10
    const newY = i > 0
      ? bottom - minHeight - previousHeights
      : bottom - minHeight
    return [
      ...prev,
      (
        <rect key={i} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}
              fill={keywords.find(v => v.word === curr.word).color} x={x + 11}
              y={newY} height={minHeight} width={width} />
      )
    ]
    }, []
  )

  return (
  <g key={key}>
    <g>
    {
      fPAS.length > 0
        ? (fPAS.concat(<FacebookModable className={style.icon}
            width={20} height={20}
            x={fPAS[fPAS.length - 1].props.x} y={fPAS[fPAS.length - 1].props.y - 25} />))
        : fPAS
    }
    </g>
    <g>
    {
      tPAS.length > 0
        ? (tPAS.concat(<TwitterModable className={style.icon}
            width={20} height={20}
            x={tPAS[tPAS.length - 1].props.x} y={tPAS[tPAS.length - 1].props.y - 25} />))
        : tPAS
    }
    </g>
  </g>
)
}

BarAnalysis.propTypes = {
  key: PropTypes.string.isRequired,
  data: PropTypes.object.isRequired,
  keywords: PropTypes.array.isRequired,
  x: PropTypes.number,
  height: PropTypes.number,
  width: PropTypes.number,
  bottom: PropTypes.number,
  scaleY: PropTypes.func,
  onMouseEnter: PropTypes.func,
  onMouseLeave: PropTypes.func
}