var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

import React, { useState, useEffect, useRef, useMemo } from 'react';
import PropTypes from 'prop-types';
//import classNames from 'classnames';
//import Chart from 'react-chartjs-2';
//import { Bar, Doughnut, Line, Pie, Polar, Radar } from 'react-chartjs-2';
import Chart from 'chart.js';
import { customTooltips } from '@coreui/coreui-chartjs/dist/js/coreui-chartjs.js';
import "@coreui/coreui-chartjs/dist/css/coreui-chartjs.css";

//component - CoreUI / CCharts

var CCharts = function CCharts(props) {
  var innerRef = props.innerRef,
      datasets = props.datasets,
      labels = props.labels,
      options = props.options,
      plugins = props.plugins,
      type = props.type,
      attributes = _objectWithoutProperties(props, ['innerRef', 'datasets', 'labels', 'options', 'plugins', 'type']);

  //console.log(Chart);

  var compData = useRef({ firstRun: true }).current;

  var _useState = useState(),
      chart = _useState[0],
      setChart = _useState[1];

  var ref = useRef();

  var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
  //  const type = ''

  // methods

  var renderChart = function renderChart() {
    destroyChart();
    setChart(new Chart(ref.current.getContext('2d'), chartConfig));
  };
  var updateChart = function updateChart() {
    Object.assign(chart, chartConfig);
    chart.update();
  };
  var destroyChart = function destroyChart() {
    if (chart) {
      chart.destroy();
    }
  };

  // vars

  var _uid = '';
  var safeId = function () {
    // as long as this._uid() works there is no need to generate the key
    var key = function key() {
      return Math.random().toString(36).replace('0.', '');
    };
    return '__safe_id__' + _uid || key();
  }();
  var computedDatasets = function () {
    return datasets;
  }();
  //
  var computedLabels = function () {
    if (labels && typeof labels !== 'string') {
      return labels;
    } else if (!datasets || !datasets[0] || !datasets[0].data) {
      return [];
    }
    var emptyLabels = Array(datasets[0].data.length).fill('');
    if (labels === 'indexes') {
      return emptyLabels.map(function (u, i) {
        return i + 1;
      });
    } else if (labels === 'months') {
      return emptyLabels.map(function (u, i) {
        return months[i % 12];
      });
    }
    return emptyLabels;
  }();
  var computedData = function () {
    return {
      datasets: computedDatasets,
      labels: computedLabels
    };
  }();
  var customTooltips = function () {
    if (options && options.tooltips) {
      return;
    }
    return {
      tooltips: {
        enabled: false,
        custom: customTooltips,
        intersect: true,
        mode: 'index',
        position: 'nearest',
        callbacks: {
          labelColor: function labelColor(tooltipItem, chart) {
            function getValue(prop) {
              return (typeof prop === 'undefined' ? 'undefined' : _typeof(prop)) === 'object' ? prop[tooltipItem.index] : prop;
            }
            var dataset = chart.data.datasets[tooltipItem.datasetIndex];
            //tooltipLabelColor is coreUI custom prop used only here
            var backgroundColor = getValue(dataset.tooltipLabelColor || dataset.pointHoverBackgroundColor || dataset.borderColor || dataset.backgroundColor);
            return {
              backgroundColor: backgroundColor
            };
          }
        }
      }
    };
  }();
  var computedOptions = function () {
    return Object.assign({}, options, customTooltips || {});
  }();
  var chartConfig = function () {
    return {
      type: type,
      data: computedData,
      options: computedOptions || options,
      plugins: plugins
    };
  }();

  //watch

  //chartConfig
  useMemo(function () {
    if (compData.firstRun) return;
    updateChart();
  }, [chartConfig]);

  // effect

  useEffect(function () {
    renderChart();
    compData.firstRun = false;
    return function () {
      destroyChart();
    };
  }, []);

  // render

  return React.createElement(
    'div',
    _extends({}, attributes, { ref: innerRef }),
    React.createElement('canvas', { id: safeId, ref: ref })
  );
};

CCharts.propTypes = process.env.NODE_ENV !== "production" ? {
  //
  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]),
  datasets: PropTypes.array,
  labels: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
  options: PropTypes.object,
  plugins: PropTypes.array,
  type: PropTypes.string
} : {};

CCharts.defaultProps = {};

export default CCharts;