import React, { Component } from 'react'
import ReactHighcharts from 'react-highcharts'
import {connect} from 'react-redux'
import autobind from 'react-autobind'
import '../style.scss'
import axios from 'axios';
import { handleKeywordTweets } from '../actions'
import { store } from '../../../app.jsx'
require('highcharts/modules/wordcloud.js')(ReactHighcharts.Highcharts)

class WordCloud extends Component {
    constructor(props) {
        super(props);
        autobind(this);
    }

    render() {
        const { keywords } = this.props
        console.log(keywords);
        let words = []
        keywords.map(data => {
            let obj = {}
            obj.name = data.word
            if(data.count < 100) {
                obj.weight = 5
            } else {
                obj.weight = 6
            }
            words.push(obj)
        })

        let config = {
                chart: {
                    type: 'column',
                    inverted: false,
                    height:400,
                    marginTop:75,
                    marginBottom: 20,
                    borderRadius: 8,
                    backgroundColor: "#2B2E4A",
                },
                tooltip: {
                    enabled: false
                },
                series: [{
                    type: 'wordcloud',
                    data: words,
                    name: 'Occurrences',

                }],
                title: {
                    text: 'SENTIMENTAL WORDCLOUD',
                    y: 40,
                    style: {
                        color: '#ADB0D0',
                        fontFamily: 'Montserrat'
                    }
                },
                plotOptions: {
                    series: {
                        cursor: 'pointer',
                        events: {
                            click: function(event) {
                                let keyword = event.point.name
                                axios.all([
                                    axios.get(`/api/v1/tweets/@36,-115,7z?${keyword}`),
                                    axios.get(`/api/v1/tweets/@36,-115,7z/sentiments?keyword=${keyword}`)

                                ])
                                .then(axios.spread((tweets, sentiments) => {
                                    console.log(tweets);
                                    this.props.dispatch(handleKeywordTweets())
                                    console.log(sentiments);
                                }))
                                .catch(function(error){
                                    console.log(error);
                                })
                            }
                        }
                    }
                }
        }
        return (
            <ReactHighcharts config = {config}
            style={{ "min-width": "310px", "max-width": "800px", margin:" 0 auto"}}
            ></ReactHighcharts>
        );
    }
}

const mapStateToProps = (state) => {
    const { keywords } = state.places
    return { keywords }
}

export default connect(mapStateToProps)(WordCloud)