import React, { Component } from "react";
import * as moment from 'moment';
import { withStyles } from '@material-ui/core/styles';
import {
  Typography,
  CircularProgress
} from '@material-ui/core';
import Skeleton from '@material-ui/lab/Skeleton';
import ToggleButton from '@material-ui/lab/ToggleButton';
import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';

import Store from "../../stores";
import { colors } from '../../theme'

import { render } from 'react-dom';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';

import {
  GET_PRICES,
  PRICES_RETURNED,
  PRICES_UPDATED,
} from '../../constants'

let priceOptions = {
  chart: {
    type: 'spline'
  },
  title: {
    text: 'Price Data'
  },
  series: [
    {
      data: [1, 2, 1, 4, 3, 6]
    }
  ]
};

let volOptions = {
  chart: {
    type: 'spline'
  },
  title: {
    text: 'Volatility'
  },
  series: [
    {
      data: [1, 2, 1, 4, 3, 6]
    }
  ]
};

const styles = theme => ({
  root: {
    flex: 1,
    display: 'flex',
    maxWidth: '1100px',
    width: '100%',
    justifyContent: 'flex-start',
    flexWrap: 'wrap',
    alignItems: 'flex-start',
    marginTop: '40px'
  },
  feedContainer: {
    position: 'relative',
    background: colors.lightGray,
    width: '240px',
    padding: '24px 8px',
    minHeight: '280px',
    margin: '12px',
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: '10px',
    cursor: 'pointer',
    '&:hover': {
      background: 'rgba(0,0,0,0.1)'
    }
  },
  pricePoint: {
    width: '100%',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    margin: '6px 0px',
    zIndex: 1
  },
  updated: {
    width: '100%',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    marginTop: '24px',
    marginBottom: '6px',
    zIndex: 1
  },
  pair: {
    marginBottom: '6px',
    zIndex: 1,
    display: 'flex',
    alignItems: 'center',
  },
  volatilityHead: {
    marginTop: '24px',
    marginBottom: '6px',
    zIndex: 1
  },
  volatility: {
    margin: '6px 0px',
    zIndex: 1
  },
  gray: {
    color: colors.darkGray,
    zIndex: 1
  },
  feedBackground: {
    backgroundSize: 'cover',
    backgroundRepeat: 'no-repeat',
    backgroundPosition: 'center',
    position: 'absolute',
    top: 0,
    left: 0,
    width: '100%',
    height: '100%',
    filter: 'grayscale(100%)',
    opacity: 0.05
  },
  toggleButton: {

  },
  filters: {
    minWidth: '100%',
    padding: '12px'
  },
  productIcon: {
    marginRight: '12px'
  },
  skeletonFrame: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center'
  },
  skeleton: {
    width: '100px',
    marginBottom: '12px'
  },
  skeletonTitle: {
    width: '150px',
    marginBottom: '6px',
    marginTop: '12px'
  }
})

const emitter = Store.emitter
const dispatcher = Store.dispatcher
const store = Store.store

class Feeds extends Component {

  constructor(props) {
    super()

    const graphData = store.getStore('graphData')

    this.state = {
      graphData: graphData,
      priceOptions: priceOptions,
      volOptions: volOptions
    }

    dispatcher.dispatch({ type: GET_PRICES, content: { pair: props.match.params.pair } })
  };

  componentWillMount() {
    emitter.on(PRICES_RETURNED, this.pricesReturned);
  };

  componentWillUnmount() {
    emitter.removeListener(PRICES_RETURNED, this.pricesReturned);
  };

  pricesReturned = () => {
    const graphData = store.getStore('graphData')
    priceOptions = {
      chart: {
        type: 'spline'
      },
      title: {
        text: 'Price Data'
      },
      xAxis: {
        categories: graphData.dataTimeSeries,
      },
      series: [
        {
          data: graphData.data0To1
        }
      ]
    };
    console.log(graphData.vol0To1)
    volOptions = {
      chart: {
        type: 'spline'
      },
      title: {
        text: 'Volatility'
      },
      xAxis: {
        categories: graphData.volTimeSeries,
      },
      series: [
        {
          data: graphData.vol0To1
        }
      ]
    };
    this.setState({
      graphData: graphData,
      priceOptions: priceOptions,
      volOptions: volOptions
    })
  }

  render() {
    const { classes } = this.props;

    return (
      <div>
        <HighchartsReact highcharts={Highcharts} options={this.state.volOptions} />
        <HighchartsReact highcharts={Highcharts} options={this.state.priceOptions} />
      </div>
    )
  }
}

export default withStyles(styles)(Feeds);