import React, { Component } from 'react';
import * as Widgets from 'components/widgets';
import { get, apiCall } from '../../../../helpers/api';
import { formatBigNumber } from '../../../../helpers/misc';
import { Dimmer, Loader, Table, Icon } from 'semantic-ui-react';

let messages = {};

export default class ChartContainer extends Component {
  state = {
    data: null,
    isLoading: false
  }

  apiCall = null

  componentWillMount() {
		messages = this.props.messages;
		this.getData(this.props);
  }

  componentWillReceiveProps(nextProps) {
    let emptyObj = {},
        prevWidget = this.props.widget || emptyObj,
        nextWidget = nextProps.widget || emptyObj,
        prevQuery = this.props.query || emptyObj;

    if(nextWidget) {
      if((nextWidget.filters !== prevWidget.filters && nextWidget.filters !== prevQuery.filters)
      || nextWidget.isUpdated !== prevWidget.isUpdated
      || (nextWidget.options !== prevWidget.options && (nextWidget.filters || nextWidget.query) && nextWidget.options)
      || nextWidget.query !== prevWidget.query
    ) {
        this.getData(nextProps);
      }
    }
  }

	componentWillUnmount() {
    this.cancelApiCall();
	}

  cancelApiCall() {
    if(this.apiCall) {
      this.apiCall.cancel();
    }
  }

  render() {
    let Content = null,
        presentation = this.props.config.presentation;

    if(presentation) {
      if(typeof presentation.component === "string") {
        Content = Widgets[presentation.component];
      } else if(typeof presentation.component === "function") {
        Content = presentation.component;
      }
    } else {
      console.warn("Widget '"+this.props.widget.name+"' with type '"+this.props.widget.type+"' is missing key 'content' in the config");
    }

    if(this.props.widget.filters === undefined && this.props.config.sidebar && this.props.config.sidebar.filters) {
      Content = Widgets["WidgetEmpty"];
    }

    //TODO: DONT SEND ALL PROPS?
    return (
      !this.state.isLoading && Content ?
      <Content data={this.state.data} {...this.props} />
      : this.state.isLoading ?
      (<Dimmer active inverted>
        <Loader active inverted></Loader>
      </Dimmer>)
      : <div></div>
    );
  }

  getData(props) {
    if(props.config.container.endpoint) {
      if(props.widget.filters !== undefined || (!this.props.config.sidebar || !this.props.config.sidebar.filters)) {
        this.cancelApiCall();
        this.apiCall = apiCall();

        this.setState({
          data: null,
          isLoading: true
        });

        let options = props.widget.options;
        let filters = (props.query && props.query.filters) || (props.widget.filters);

        get(props.config.container.endpoint, {...filters, ...options}, this.apiCall.token).then(response => {
          let {data = [], stats = null, warnings = []} = response,
          hasData = data && data.length >= 1,
          info = hasData ? null : messages.info.noData,
          popup = null;

          let configStats = this.props.config.presentation.stats;
          if(configStats && hasData && (stats || warnings.length)) {
            popup = this.getPopup(warnings, stats, configStats);
          }

          this.props.widgetContentUpdate(popup, null, info, hasData);

          this.setState({
            isLoading: false,
            data: hasData ? data : null
          });
        }).catch(e => {
          if(e.type) {
            if(e.type === "error") {
              this.setState({
                isLoading: false
              });
              this.props.widgetContentUpdate(null, e.message);
            }
          } else {
            console.warn(e);
          }
        });
      }
    } else {
      console.warn("Widget '"+this.props.widget.name+"' with type '"+this.props.widget.type+"' is missing key 'endpoint' in the config");
    }
  }

  getPopup = (warnings = [], stats = {}, configStats) => {
		return {warning: warnings.length > 0, icon: 'info', content: <div>
		 <h5>Dataset</h5>
		 <Table size='small' basic compact definition>
			 <Table.Body>
         {configStats.map((stat, i) => (
           <Table.Row key={i}>
             <Table.Cell>{stat.name}</Table.Cell>
             <Table.Cell>{formatBigNumber(stats[stat.key]) || "-"}</Table.Cell>
           </Table.Row>
         ))}
			 </Table.Body>
		 </Table>
		 { warnings.length > 0 &&
			 <span>
				 <h5><Icon className='warning'/>Warnings</h5>
				 {warnings.map((warning, index) => (
					 <p key={index}>{warning}</p>
				 ))}
			 </span>
		 }
	 </div>};
	}
}