/*
 * Copyright (c) 2018, WSO2 Inc. (http://wso2.com) All Rights Reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import React, {Component} from 'react';
import Widget from '@wso2-dashboards/widget';
import FlatButton from 'material-ui/FlatButton';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import darkBaseTheme from 'material-ui/styles/baseThemes/darkBaseTheme';
import VizG from 'react-vizgrammar';

class TweetCounter extends Widget {
    constructor(props) {
        super(props);

        this.time = new Date().toLocaleString();
        this.state = {
            receivedMsg: 0,
            metadata: this.metadata,
            width: this.props.glContainer.width,
            height: this.props.glContainer.height,
            btnHeight: 150,
            hashTag: [],
        };
        this.set = [];

        this.metadata = {
            names: ['count'],
            types: ['linear']
        };

        this.styles = {
            timestamp: {
                position: 'absolute',
                bottom: 20,
                left: 10,
                lineHeight: '20px',
                fontWeight: 'normal',
                margin: 0
            },
            historicalDataButton: {
                position: 'absolute',
                right: 10,
                bottom: 10
            }
        };

        this.clearMsgs = this.clearMsgs.bind(this);
        this.setReceivedMsg = this.setReceivedMsg.bind(this);
        this.handleResize = this.handleResize.bind(this);
        this.props.glContainer.on('resize', this.handleResize);
        this._handleDataReceived = this._handleDataReceived.bind(this);
    }

    componentDidMount() {
        super.getWidgetConfiguration(this.props.widgetID)
            .then((message) => {
                super.getWidgetChannelManager().subscribeWidget(this.props.id, this._handleDataReceived, message.data.configs.providerConfig);
            })
    }

    componentWillUnmount() {
        super.getWidgetChannelManager().unsubscribeWidget(this.props.id);
    }

    handleResize() {
        this.setState({width: this.props.glContainer.width, height: this.props.glContainer.height});
    }

    _handleDataReceived(setData) {
        this.setState({
            hashTag: setData.data,
        });
    }

    componentWillMount() {
        super.subscribe(this.setReceivedMsg);
    }

    setReceivedMsg(receivedMsg) {
        this.set.push({value: receivedMsg});
        this.setState({receivedMsg});
    }

    generateOutput() {
        const output = [];
        this.set.forEach(d => {
            output.push(d.value);
        });
        return [[output.length]];
    }

    clearMsgs() {
        this.setState({receivedMsg: 0});
        this.set = [];
    }

    configSetUp(hashTag) {
        let Config = {
            x: 'count',
            title: hashTag,
            charts: [
                {
                    type: 'number'
                }
            ]
        };
        return Config
    }

    render() {
        return (
            <MuiThemeProvider muiTheme={getMuiTheme(this.props.muiTheme)}>
                <section>
                    <FlatButton
                        label="Historical Data"
                        fullWidth={false}
                        backgroundColor={'#1c3b4a'}
                        hoverColor={'#1a619d'}
                        style={this.styles.historicalDataButton}
                        onClick={() => {
                            location.href = "/portal/dashboards/twitteranalytics/TweetAnalysis";
                        }}/>
                    <h5 style={this.styles.timestamp}>From {this.time}</h5>
                    <VizG
                        config={this.configSetUp(this.state.hashTag[0])}
                        metadata={this.metadata}
                        data={this.generateOutput()}
                        append={false}
                        height={this.state.height}
                        width={this.state.width}
                        theme={this.props.muiTheme.name}
                    />
                </section>
            </MuiThemeProvider>
        );
    }
}

global.dashboard.registerWidget("TweetCounter", TweetCounter);
