import _extends from '@babel/runtime/helpers/extends';
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import 'core-js/modules/es.symbol.js';
import 'core-js/modules/es.array.concat.js';
import 'core-js/modules/es.array.filter.js';
import 'core-js/modules/es.array.iterator.js';
import 'core-js/modules/es.array.map.js';
import 'core-js/modules/es.object.get-own-property-descriptor.js';
import 'core-js/modules/es.object.get-own-property-descriptors.js';
import 'core-js/modules/es.object.keys.js';
import 'core-js/modules/es.object.to-string.js';
import 'core-js/modules/es.regexp.to-string.js';
import 'core-js/modules/web.dom-collections.for-each.js';
import 'core-js/modules/web.dom-collections.iterator.js';
import React__default, { useState, useEffect, Fragment } from 'react';
import classnames from 'classnames';
import { yellow, gray20 } from '@carbon/colors';
import { CARD_CONTENT_PADDING, CARD_SIZES } from '../../constants/LayoutConstants.js';
import { CardPropTypes, GaugeCardPropTypes } from '../../constants/CardPropTypes.js';
import Card from '../Card/Card.js';
import DataStateRenderer from '../Card/DataStateRenderer.js';
import { settings } from '../../constants/Settings.js';
import { getResizeHandles } from '../../utils/cardUtilityFunctions.js';

var _excluded = ["children", "id", "title", "tooltip", "titleTextTooltip", "content", "values", "data", "isLoading", "isResizable", "hasMoreData", "size", "className", "dataState", "testID", "testId", "padding"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var iotPrefix = settings.iotPrefix;
var STROKE_SIZE = 8;
// r value of the circle in SVG
var radius = 30;
// radius doubled plus stroke
var gaugeSize = radius * 2 + STROKE_SIZE;
// circumference of SVG.
var circum = 2 * Math.PI * radius;
var getStrokeDash = function getStrokeDash() {
  var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
  // length of stroke to match percentage
  return value * circum / 100;
};
var getColor = function getColor(gauge, value) {
  var color = gauge.color;
  var grade = '';
  var comparisons = {
    '<': function _(a, b) {
      return a < b;
    },
    '>': function _(a, b) {
      return a > b;
    },
    '=': function _(a, b) {
      return a === b;
    },
    '<=': function _(a, b) {
      return a <= b;
    },
    '>=': function _(a, b) {
      return a >= b;
    }
  };
  if (gauge.thresholds) {
    gauge.thresholds.forEach(function (thresh) {
      if (comparisons[thresh.comparison](value, thresh.value)) {
        color = thresh.color; // eslint-disable-line prefer-destructuring
        grade = thresh.label;
      }
    });
    return {
      grade: grade,
      color: color
    };
  }
  return {
    grade: grade,
    color: color
  };
};
var GaugeCard = function GaugeCard(_ref) {
  var children = _ref.children,
    id = _ref.id,
    title = _ref.title,
    tooltip = _ref.tooltip,
    titleTextTooltip = _ref.titleTextTooltip,
    gauges = _ref.content.gauges,
    values = _ref.values;
    _ref.data;
    var isLoading = _ref.isLoading,
    isResizable = _ref.isResizable;
    _ref.hasMoreData;
    var size = _ref.size,
    className = _ref.className,
    dataState = _ref.dataState,
    testID = _ref.testID,
    testId = _ref.testId,
    padding = _ref.padding,
    others = _objectWithoutProperties(_ref, _excluded);
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    loadedState = _useState2[0],
    setLoadedState = _useState2[1];
  useEffect(function () {
    var timeout = setTimeout(function () {
      setLoadedState(true);
    }, 1000);
    return function () {
      clearTimeout(timeout);
    };
  }, []);
  var myStyles = dataState ? {} : {
    paddingTop: 0,
    paddingRight: padding ? CARD_CONTENT_PADDING : 0,
    paddingBottom: padding ? CARD_CONTENT_PADDING : 0,
    paddingLeft: padding ? CARD_CONTENT_PADDING : 0,
    rowGap: size === CARD_SIZES.SMALL ? 0 : '1rem'
  };
  var resizeHandles = isResizable ? getResizeHandles(children) : [];
  return /*#__PURE__*/React__default.createElement(Card, _extends({
    id: id,
    className: "".concat(iotPrefix, "--gauge-card"),
    title: title,
    size: size,
    resizeHandles: resizeHandles,
    "aria-label": "".concat(title)
    // TODO: remove deprecated testID in v3.
    ,
    testId: testID || testId
  }, others, {
    tooltip: tooltip || (!titleTextTooltip ? "".concat(title) : undefined),
    titleTextTooltip: titleTextTooltip,
    isLoading: isLoading
  }), /*#__PURE__*/React__default.createElement("div", {
    className: classnames("".concat(iotPrefix, "--gauge-container"), className),
    style: myStyles
  }, dataState && /*#__PURE__*/React__default.createElement(DataStateRenderer, {
    dataState: dataState,
    size: size,
    id: id
  }), !dataState && gauges.map(function (gauge, i) {
    var _getColor = getColor(gauge, values[gauge.dataSourceId]),
      color = _getColor.color;
    var valueLength = values[gauge.dataSourceId] && values[gauge.dataSourceId].toString().length;
    return /*#__PURE__*/React__default.createElement(Fragment, {
      key: "".concat(iotPrefix, "-gauge-").concat(i)
    }, /*#__PURE__*/React__default.createElement("svg", {
      "aria-labelledby": "gauge-label",
      className: classnames("".concat(iotPrefix, "--gauge"), _defineProperty({}, "".concat(iotPrefix, "--gauge__loaded"), loadedState), className),
      percent: "0",
      style: {
        '--gauge-value': values[gauge.dataSourceId] || 0,
        '--gauge-max-value': gauge.maximumValue,
        '--gauge-colors': color,
        '--gauge-bg': gauge.backgroundColor,
        '--stroke-dash': getStrokeDash(values[gauge.dataSourceId]) || 0,
        '--stroke-dash-array': circum,
        '--gauge-size': "".concat(gaugeSize, "px"),
        '--gauge-trend-color': gauge.trend.color
      }
    }, /*#__PURE__*/React__default.createElement("circle", {
      className: "".concat(iotPrefix, "--gauge-bg"),
      cx: gaugeSize / 2,
      cy: gaugeSize / 2,
      r: radius
    }), /*#__PURE__*/React__default.createElement("circle", {
      className: "".concat(iotPrefix, "--gauge-fg"),
      cx: gaugeSize / 2,
      cy: gaugeSize / 2,
      r: radius
    }), /*#__PURE__*/React__default.createElement("text", {
      id: "gauge-label",
      className: classnames("".concat(iotPrefix, "--gauge-value"), "".concat(iotPrefix, "--gauge-value__centered"), _defineProperty({}, "".concat(iotPrefix, "--gauge-value-sm"), valueLength === 4), _defineProperty({}, "".concat(iotPrefix, "--gauge-value-md"), valueLength === 3), _defineProperty({}, "".concat(iotPrefix, "--gauge-value-lg"), valueLength <= 2)),
      x: gaugeSize / 2,
      y: gaugeSize / 2 + STROKE_SIZE,
      textAnchor: "middle"
    }, /*#__PURE__*/React__default.createElement("tspan", null, values[gauge.dataSourceId]), /*#__PURE__*/React__default.createElement("tspan", null, gauge.units))), values[gauge.trend.dataSourceId] && /*#__PURE__*/React__default.createElement("div", {
      className: classnames("".concat(iotPrefix, "--gauge-trend"), _defineProperty(_defineProperty({}, "".concat(iotPrefix, "--gauge-trend__up"), gauge.trend.trend === 'up'), "".concat(iotPrefix, "--gauge-trend__down"), gauge.trend.trend === 'down')),
      key: "".concat(gauge.trend.dataSourceId, "-").concat(i)
    }, /*#__PURE__*/React__default.createElement("p", {
      style: {
        '--gauge-trend-color': gauge.trend.color
      }
    }, values[gauge.trend.dataSourceId])));
  })));
};
GaugeCard.propTypes = _objectSpread(_objectSpread({}, CardPropTypes), GaugeCardPropTypes);
GaugeCard.defaultProps = {
  isLoading: false,
  description: null,
  content: {
    gauges: [{
      dataSourceId: null,
      units: '%',
      minimumValue: 0,
      maximumValue: 100,
      renderValueFunction: null,
      color: yellow,
      backgroundColor: gray20,
      // @TODO: support half-circle and line gauge
      shape: 'circle',
      trend: null,
      thresholds: null
    }]
  },
  padding: true,
  values: {}
};
GaugeCard.displayName = 'GaugeCard';
GaugeCard.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "GaugeCard",
  "props": {
    "isLoading": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "required": false
    },
    "description": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "required": false
    },
    "content": {
      "defaultValue": {
        "value": "{\n  gauges: [\n    {\n      dataSourceId: null,\n      units: '%',\n      minimumValue: 0,\n      maximumValue: 100,\n      renderValueFunction: null,\n      color: yellow,\n      backgroundColor: gray20,\n      // @TODO: support half-circle and line gauge\n      shape: 'circle',\n      trend: null,\n      thresholds: null,\n    },\n  ],\n}",
        "computed": false
      },
      "required": false
    },
    "padding": {
      "defaultValue": {
        "value": "true",
        "computed": false
      },
      "required": false
    },
    "values": {
      "defaultValue": {
        "value": "{}",
        "computed": false
      },
      "required": false
    }
  },
  "composes": ["../../constants/CardPropTypes"]
};
var GaugeCard$1 = GaugeCard;

export { GaugeCard$1 as default, getColor, getStrokeDash };
