/**
 * Copyright (c) 2017 Tomek Wójcik <tomek@bthlabs.pl>
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to
 * deal in the Software without restriction, including without limitation the
 * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
 * sell copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
 * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
 * IN THE SOFTWARE.
 */

import ClassName from "classnames";
import Highcharts from "highcharts";
import React from "react";
import ReactDOM from "react-dom";
import {connect} from "react-redux";
import underscore from "underscore";

class ChartComponent extends React.PureComponent {
  constructor (props) {
    super(props);

    this._chart = null;
  }
  componentDidMount () {
    this.renderChart();
  }
  componentDidUpdate () {
    this.renderChart();
  }
  componentWillUnmount () {
    if (this._chart) {
      this._chart.destroy();
    }
  }
  hasSeries () {
    return (
      underscore.isArray(this.props.series) && this.props.series.length > 0
    );
  }
  renderChart () {
    let config = underscore.extendOwn({}, this.props.config);

    if (!config.title) {
      config.title = {};
    }

    if (this.props.title) {
      config.title.text = this.props.title;
    }

    if (!config.subtitle) {
      config.subtitle = {};
    }

    if (this.props.subtitle) {
      config.subtitle.text = this.props.subtitle;
    }

    config.series = [];

    if (!config.xAxis) {
      config.xAxis = {};
    }

    config.xAxis.categories = [];

    if (this.props.categories) {
      config.xAxis.categories = this.props.categories;
    }

    if (this.props.series) {
      config.series = this.props.series;
    }

    if (!this._chart) {
      this._chart = Highcharts.chart(
        ReactDOM.findDOMNode(this), config
      );
    } else {
      this._chart.setTitle(config.title, config.subtitle, false);

      let currentSeriesCount = this._chart.series.length;
      for (let i = currentSeriesCount - 1; i >= 0; i--) {
        this._chart.series[i].remove(false);
      }

      for (let i = 0; i < config.series.length; i++) {
        this._chart.addSeries(config.series[i], false);
      }

      this._chart.xAxis[0].update(config.xAxis, false);

      this._chart.reflow();
      this._chart.redraw();
    }

    if (this._chart.series.length == 0) {
      this._chart.showLoading();
    } else {
      this._chart.hideLoading();
    }
  }
  render () {
    return (
      <div className="q3stats-chart"></div>
    );
  }
}

ChartComponent.propTypes = {
  categories: React.PropTypes.array,
  config: React.PropTypes.object.isRequired,
  series: React.PropTypes.array.isRequired,
  title: React.PropTypes.string,
  subtitle: React.PropTypes.string
};

const mapStateToProps = (state, ownProps) => {
  return {
    categories: ownProps.categories,
    config: ownProps.config,
    layout: state.settings.layout,
    series: ownProps.series,
    title: ownProps.title,
    subtitle: ownProps.subtitle
  };
};

let reduxContainer = connect(mapStateToProps)(ChartComponent);

export default reduxContainer;