import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import _defaultsDeep from '../../node_modules/lodash-es/defaultsDeep.js';
import 'core-js/modules/es.array.concat.js';
import 'core-js/modules/es.array.map.js';
import 'core-js/modules/es.regexp.exec.js';
import 'core-js/modules/es.string.replace.js';
import 'core-js/modules/esnext.string.replace-all.js';
import React__default, { useRef, useState, useMemo, useEffect } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { MeterChart, AreaChart, StackedAreaChart } from '@carbon/charts-react';
import { CARD_TYPES } from '../../constants/LayoutConstants.js';
import { MeterChartPropTypes, SparklineChartPropTypes } from '../../constants/ChartPropTypes.js';
import { settings } from '../../constants/Settings.js';
import { getChartOptions } from '../../utils/cardTypeUtilityFunctions.js';

var iotPrefix = settings.iotPrefix;
var propTypes = {
  testId: PropTypes.string,
  isExpanded: PropTypes.bool,
  type: PropTypes.oneOf([CARD_TYPES.METER_CHART, CARD_TYPES.SPARKLINE_CHART, CARD_TYPES.STACKED_AREA_CHART]).isRequired,
  data: PropTypes.oneOf([MeterChartPropTypes.data, SparklineChartPropTypes.data]),
  content: PropTypes.oneOf([MeterChartPropTypes.content, SparklineChartPropTypes.content])
};
var defaultProps = {
  testId: 'cart-type-content',
  isExpanded: false,
  data: [],
  content: null
};
var CardTypeContent = function CardTypeContent(_ref) {
  var _listRef$current, _content$listContent, _contentWithDefaults$;
  var testId = _ref.testId,
    isExpanded = _ref.isExpanded,
    type = _ref.type,
    data = _ref.data,
    content = _ref.content;
  var listRef = useRef(null);
  var _useState = useState(),
    _useState2 = _slicedToArray(_useState, 2),
    listHeight = _useState2[0],
    setListHeight = _useState2[1];
  var contentWithDefaults = useMemo(function () {
    return _defaultsDeep({}, content, defaultProps.content);
  }, [content]);
  var options = getChartOptions(type, data.length > 1, contentWithDefaults);
  var listClientHeight = (_listRef$current = listRef.current) === null || _listRef$current === void 0 ? void 0 : _listRef$current.clientHeight;
  useEffect(function () {
    setListHeight(listClientHeight);
  }, [listClientHeight]);
  var Chart = type === CARD_TYPES.METER_CHART ? MeterChart : type === CARD_TYPES.SPARKLINE_CHART ? AreaChart : type === CARD_TYPES.STACKED_AREA_CHART ? StackedAreaChart : null;
  return /*#__PURE__*/React__default.createElement("div", {
    className: classnames("".concat(iotPrefix, "--").concat(type.replaceAll('_', '-').toLowerCase(), "--wrapper"), _defineProperty({}, "".concat(iotPrefix, "--").concat(type.replaceAll('_', '-').toLowerCase(), "--wrapper__expanded"), isExpanded)),
    style: {
      '--card-list-height': ((_content$listContent = content.listContent) === null || _content$listContent === void 0 ? void 0 : _content$listContent.length) > 0 ? "".concat(listHeight, "px") : '0px'
    }
  }, /*#__PURE__*/React__default.createElement(Chart, {
    data: data,
    options: options
  }), ((_contentWithDefaults$ = contentWithDefaults.listContent) === null || _contentWithDefaults$ === void 0 ? void 0 : _contentWithDefaults$.length) > 0 ? /*#__PURE__*/React__default.createElement("div", {
    ref: listRef,
    "data-testid": "".concat(testId, "-list")
  }, contentWithDefaults.listContent.map(function (_ref2) {
    var label = _ref2.label,
      value = _ref2.value;
    return /*#__PURE__*/React__default.createElement("div", {
      className: "".concat(iotPrefix, "--").concat(type.replace('_', '-').toLowerCase(), "--wrapper--list")
    }, /*#__PURE__*/React__default.createElement("p", null, label), /*#__PURE__*/React__default.createElement("span", null, value));
  })) : null);
};
CardTypeContent.propTypes = propTypes;
CardTypeContent.defaultProps = defaultProps;
CardTypeContent.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "CardTypeContent",
  "props": {
    "testId": {
      "defaultValue": {
        "value": "'cart-type-content'",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "isExpanded": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "data": {
      "defaultValue": {
        "value": "[]",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "enum",
        "value": [{
          "value": "MeterChartPropTypes.data",
          "computed": true
        }, {
          "value": "SparklineChartPropTypes.data",
          "computed": true
        }]
      },
      "required": false
    },
    "content": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "enum",
        "value": [{
          "value": "MeterChartPropTypes.content",
          "computed": true
        }, {
          "value": "SparklineChartPropTypes.content",
          "computed": true
        }]
      },
      "required": false
    },
    "type": {
      "description": "",
      "type": {
        "name": "enum",
        "value": [{
          "value": "CARD_TYPES.METER_CHART",
          "computed": true
        }, {
          "value": "CARD_TYPES.SPARKLINE_CHART",
          "computed": true
        }, {
          "value": "CARD_TYPES.STACKED_AREA_CHART",
          "computed": true
        }]
      },
      "required": true
    }
  }
};
var CardTypeContent$1 = CardTypeContent;

export { CardTypeContent$1 as default };
