import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import 'core-js/modules/es.symbol.js';
import 'core-js/modules/es.symbol.description.js';
import 'core-js/modules/es.array.concat.js';
import 'core-js/modules/es.array.find-index.js';
import 'core-js/modules/es.array.map.js';
import 'core-js/modules/es.object.assign.js';
import 'core-js/modules/es.object.to-string.js';
import 'core-js/modules/es.regexp.exec.js';
import 'core-js/modules/es.string.replace.js';
import 'core-js/modules/web.dom-collections.for-each.js';
import React__default, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { Enter, Space } from '../../node_modules/@carbon/react/es/internal/keyboard/keys.js';
import { matches } from '../../node_modules/@carbon/react/es/internal/keyboard/match.js';
import * as Pictograms from '@carbon/pictograms-react';
import { settings } from '../../constants/Settings.js';
import { CheckmarkOutline, Warning, CircleFilled, RadioButton } from '@carbon/icons-react';

var iotPrefix = settings.iotPrefix;
var IDPropTypes = PropTypes.oneOfType([PropTypes.string, PropTypes.number]);
var ProgressStep = function ProgressStep(_ref) {
  var id = _ref.id,
    label = _ref.label,
    secondaryLabel = _ref.secondaryLabel,
    description = _ref.description,
    onClick = _ref.onClick,
    disabled = _ref.disabled,
    showLabel = _ref.showLabel,
    stepWidth = _ref.stepWidth,
    vertical = _ref.vertical,
    invalid = _ref.invalid,
    stepNumber = _ref.stepNumber,
    lastItem = _ref.lastItem,
    isClickable = _ref.isClickable,
    current = _ref.current,
    complete = _ref.complete,
    incomplete = _ref.incomplete,
    mainStep = _ref.mainStep,
    subStep = _ref.subStep,
    spaceEqually = _ref.spaceEqually,
    pictogramName = _ref.pictogramName,
    hasPictogram = _ref.hasPictogram;
  var accessible = isClickable && !disabled && !current;
  var handleClick = function handleClick() {
    if (onClick) {
      onClick(id);
    }
  };
  var handleKeyDown = function handleKeyDown(e) {
    if (matches(e, [Enter, Space])) {
      handleClick();
    }
  };
  var getStepWidth = function getStepWidth() {
    if (stepWidth != null && stepWidth > 0 && !spaceEqually) {
      return vertical ? {
        height: "".concat(stepWidth, "rem"),
        minHeight: "".concat(stepWidth, "rem")
      } : {
        width: "".concat(stepWidth, "rem"),
        minWidth: "".concat(stepWidth, "rem")
      };
    }
    if (spaceEqually) {
      return {
        flexGrow: 1
      };
    }
    return undefined;
  };
  var StepIcon = function StepIcon() {
    var completed = complete && !disabled && !invalid;
    var value;
    if (mainStep) {
      if (completed) {
        value = /*#__PURE__*/React__default.createElement(CheckmarkOutline, {
          size: 24
        });
      } else if (invalid) {
        value = /*#__PURE__*/React__default.createElement(Warning, {
          size: 24
        });
      } else {
        var number = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("text", {
          x: "50%",
          y: "55%",
          dominantBaseline: "middle",
          textAnchor: "middle"
        }, stepNumber));
        if (current) {
          value = /*#__PURE__*/React__default.createElement(CircleFilled, {
            size: 24
          }, number);
        } else {
          value = /*#__PURE__*/React__default.createElement(RadioButton, {
            size: 24
          }, number);
        }
      }
    } else if (completed) {
      value = /*#__PURE__*/React__default.createElement(CheckmarkOutline, null);
    } else if (invalid) {
      value = /*#__PURE__*/React__default.createElement(Warning, null);
    } else if (current) {
      value = /*#__PURE__*/React__default.createElement(CircleFilled, null);
    } else {
      value = /*#__PURE__*/React__default.createElement(RadioButton, null);
    }
    return /*#__PURE__*/React__default.createElement("span", {
      className: "".concat(iotPrefix, "--progress-step-icon"),
      title: description
    }, value);
  };
  var StepLine = function StepLine() {
    var classes = classnames(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(iotPrefix, "--progress-step-line"), !complete && !subStep), "".concat(iotPrefix, "--progress-step-line--sub"), !complete && subStep), "".concat(iotPrefix, "--progress-step-line--complete"), complete && !subStep), "".concat(iotPrefix, "--progress-step-line--sub-complete"), complete && subStep));
    return !lastItem ? /*#__PURE__*/React__default.createElement("div", {
      className: classes
    }) : null;
  };
  var StepLabel = function StepLabel() {
    return /*#__PURE__*/React__default.createElement("p", {
      className: "".concat(iotPrefix, "--progress-text-label"),
      value: description,
      title: label
    }, label);
  };
  var StepSecondaryLabel = function StepSecondaryLabel() {
    return secondaryLabel !== null && secondaryLabel !== undefined ? /*#__PURE__*/React__default.createElement("p", {
      className: "".concat(iotPrefix, "--progress-text-label--optional"),
      title: secondaryLabel
    }, secondaryLabel) : null;
  };
  var StepButton = function StepButton() {
    var buttonClasses = classnames(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(iotPrefix, "--progress-step-button"), true), "".concat(iotPrefix, "--progress-step-button--main-step"), mainStep), "".concat(iotPrefix, "--progress-step-button--sub-step"), subStep), "".concat(iotPrefix, "--progress-step-button--clickable"), accessible));
    var textClasses = classnames(_defineProperty(_defineProperty({}, "".concat(iotPrefix, "--progress-text"), true), "".concat(iotPrefix, "--progress-text--hidden"), !showLabel && !current));

    // for testing purposes
    var dataTestIdLabel = label.replace(/\s/g, '-').toLowerCase();
    var type = mainStep ? 'main' : 'sub';

    // get pictogram component from name passed in items array via pictogramName property
    var PictogramComponent = pictogramName !== null && pictogramName !== void 0 && pictogramName.length ? Pictograms[pictogramName] : null;
    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null,
    // reserve space in all steps if even one pictogram is showing to align all the steps correctly
    hasPictogram && /*#__PURE__*/React__default.createElement("div", {
      className: "".concat(iotPrefix, "--progress-step--pictogram-item")
    }, PictogramComponent && /*#__PURE__*/React__default.createElement(PictogramComponent, null)), /*#__PURE__*/React__default.createElement("button", {
      className: buttonClasses,
      type: "button",
      "aria-disabled": disabled,
      disabled: disabled,
      onClick: accessible ? handleClick : null,
      onKeyDown: accessible ? handleKeyDown : null,
      "data-testid": "".concat(iotPrefix, "--progress-step-button-").concat(type, "-").concat(dataTestIdLabel),
      tabIndex: current || disabled ? -1 : 0
    }, /*#__PURE__*/React__default.createElement(StepLine, null), /*#__PURE__*/React__default.createElement(StepIcon, null), /*#__PURE__*/React__default.createElement("div", {
      className: textClasses
    }, /*#__PURE__*/React__default.createElement(StepLabel, null), /*#__PURE__*/React__default.createElement(StepSecondaryLabel, null))));
  };
  var classes = classnames(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(iotPrefix, "--progress-step"), true), "".concat(iotPrefix, "--progress-step--current"), current && !disabled), "".concat(iotPrefix, "--progress-step--complete"), complete && !disabled && !invalid), "".concat(iotPrefix, "--progress-step--incomplete"), incomplete && !current && !disabled && !invalid), "".concat(iotPrefix, "--progress-step--disabled"), disabled), "".concat(iotPrefix, "--progress-step--invalid"), invalid), "".concat(iotPrefix, "--progress-step--pictogram"), hasPictogram));
  return /*#__PURE__*/React__default.createElement("li", {
    className: classes,
    style: getStepWidth()
  }, /*#__PURE__*/React__default.createElement(StepButton, null));
};
ProgressStep.propTypes = {
  id: IDPropTypes.isRequired,
  label: PropTypes.string,
  secondaryLabel: PropTypes.string,
  description: PropTypes.string,
  disabled: PropTypes.bool,
  showLabel: PropTypes.bool,
  stepWidth: PropTypes.number,
  vertical: PropTypes.bool,
  invalid: PropTypes.bool,
  stepNumber: PropTypes.number,
  lastItem: PropTypes.bool,
  isClickable: PropTypes.bool,
  current: PropTypes.bool,
  complete: PropTypes.bool,
  incomplete: PropTypes.bool,
  mainStep: PropTypes.bool,
  subStep: PropTypes.bool,
  onClick: PropTypes.func,
  spaceEqually: PropTypes.bool,
  pictogramName: PropTypes.string,
  hasPictogram: PropTypes.bool
};
ProgressStep.defaultProps = {
  label: null,
  secondaryLabel: null,
  description: null,
  disabled: false,
  showLabel: false,
  stepWidth: null,
  vertical: false,
  invalid: false,
  stepNumber: 0,
  lastItem: false,
  isClickable: false,
  current: false,
  complete: false,
  incomplete: false,
  mainStep: false,
  subStep: false,
  onClick: null,
  spaceEqually: false,
  pictogramName: null,
  hasPictogram: false
};
var ProgressIndicator = function ProgressIndicator(_ref2) {
  var className = _ref2.className,
    items = _ref2.items,
    currentItemId = _ref2.currentItemId,
    showLabels = _ref2.showLabels,
    isVerticalMode = _ref2.isVerticalMode,
    stepWidth = _ref2.stepWidth,
    isClickable = _ref2.isClickable,
    onClickItem = _ref2.onClickItem,
    testId = _ref2.testId,
    spaceEqually = _ref2.spaceEqually;
  var _useState = useState(currentItemId || items[0].id),
    _useState2 = _slicedToArray(_useState, 2),
    currentStep = _useState2[0],
    setCurrentStep = _useState2[1];
  var flattenItems = function flattenItems(itemsList) {
    var level = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
    var newList = [];
    var step = 1;
    var newVal;
    itemsList.forEach(function (item) {
      newVal = Object.assign({}, item);
      if (item.children) {
        delete newVal.children;
        newVal.stepNumber = step;
        newVal.level = level;
        newList.push(newVal);
        step += 1;
        newList = newList.concat(flattenItems(item.children, level + 1));
      } else {
        newVal.stepNumber = step;
        newVal.level = level;
        newList.push(newVal);
        step += 1;
      }
    });
    return newList;
  };
  var newItems = items && flattenItems(items);
  var lastItemId = function lastItemId() {
    return newItems[newItems.length - 1].id;
  };
  var getCurrentIndex = function getCurrentIndex() {
    var idx = 0;
    if (currentStep) {
      var index = newItems.findIndex(function (item) {
        return item.id === currentStep;
      });
      idx = index > -1 ? index : 0;
    }
    return idx;
  };
  var handleChange = function handleChange(step) {
    if (step !== currentStep) {
      if (onClickItem) {
        onClickItem(step);
      } else {
        setCurrentStep(step);
      }
    }
  };
  useEffect(function () {
    return setCurrentStep(currentItemId);
  }, [currentItemId]);
  var classes = classnames(_defineProperty(_defineProperty(_defineProperty({}, "".concat(iotPrefix, "--progress-indicator"), true), "".concat(iotPrefix, "--progress-indicator--vertical"), isVerticalMode), className, className));

  // check if any pictogram is to be shown, this will modify styling of all the steps
  var hasPictogram = newItems.some(function (_ref3) {
    var pictogramName = _ref3.pictogramName;
    return (pictogramName === null || pictogramName === void 0 ? void 0 : pictogramName.length) && typeof Pictograms[pictogramName] !== 'undefined';
  });
  return newItems.length > 1 ? /*#__PURE__*/React__default.createElement("ul", {
    className: classes,
    "data-testid": testId
  }, newItems.map(function (_ref4, index) {
    var id = _ref4.id,
      label = _ref4.label,
      secondaryLabel = _ref4.secondaryLabel,
      description = _ref4.description,
      disabled = _ref4.disabled,
      invalid = _ref4.invalid,
      stepNumber = _ref4.stepNumber,
      level = _ref4.level,
      pictogramName = _ref4.pictogramName,
      isComplete = _ref4.isComplete;
    return /*#__PURE__*/React__default.createElement(ProgressStep, {
      id: id,
      key: id,
      label: label,
      secondaryLabel: secondaryLabel,
      description: description || label,
      current: currentStep === id
      // user can mark complete/incomplete based on it's own criteria
      ,
      complete: typeof isComplete === 'boolean' ? isComplete : getCurrentIndex() > index,
      incomplete: typeof isComplete === 'boolean' ? !isComplete : getCurrentIndex() < index,
      mainStep: level === 0,
      subStep: level > 0,
      onClick: handleChange,
      stepNumber: stepNumber,
      vertical: isVerticalMode,
      showLabel: showLabels,
      stepWidth: stepWidth,
      lastItem: lastItemId() === id,
      disabled: disabled,
      invalid: invalid,
      isClickable: isClickable,
      spaceEqually: spaceEqually,
      pictogramName: pictogramName,
      hasPictogram: hasPictogram
    });
  })) : null;
};
ProgressIndicator.propTypes = {
  className: PropTypes.string,
  items: PropTypes.arrayOf(PropTypes.shape({
    id: IDPropTypes,
    label: PropTypes.string.isRequired,
    secondaryLabel: PropTypes.string,
    description: PropTypes.string,
    disabled: PropTypes.bool,
    invalid: PropTypes.bool,
    pictogramName: PropTypes.string
  })),
  currentItemId: IDPropTypes,
  showLabels: PropTypes.bool,
  stepWidth: PropTypes.number,
  isVerticalMode: PropTypes.bool,
  isClickable: PropTypes.bool,
  onClickItem: PropTypes.func,
  testId: PropTypes.string,
  /** Specify whether the progress steps should be split equally in size in the div */
  spaceEqually: PropTypes.bool
};
ProgressIndicator.defaultProps = {
  className: null,
  items: null,
  showLabels: true,
  stepWidth: null,
  currentItemId: null,
  isVerticalMode: false,
  isClickable: false,
  onClickItem: null,
  testId: "".concat(iotPrefix, "--progress-indicator-testid"),
  spaceEqually: false
};
ProgressIndicator.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "ProgressIndicator",
  "props": {
    "className": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "items": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "arrayOf",
        "value": {
          "name": "shape",
          "value": {
            "id": {
              "name": "custom",
              "raw": "IDPropTypes",
              "required": false
            },
            "label": {
              "name": "string",
              "required": true
            },
            "secondaryLabel": {
              "name": "string",
              "required": false
            },
            "description": {
              "name": "string",
              "required": false
            },
            "disabled": {
              "name": "bool",
              "required": false
            },
            "invalid": {
              "name": "bool",
              "required": false
            },
            "pictogramName": {
              "name": "string",
              "required": false
            }
          }
        }
      },
      "required": false
    },
    "showLabels": {
      "defaultValue": {
        "value": "true",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "stepWidth": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "number"
      },
      "required": false
    },
    "currentItemId": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "custom",
        "raw": "IDPropTypes"
      },
      "required": false
    },
    "isVerticalMode": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "isClickable": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "onClickItem": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "func"
      },
      "required": false
    },
    "testId": {
      "defaultValue": {
        "value": "`${iotPrefix}--progress-indicator-testid`",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "spaceEqually": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "description": "Specify whether the progress steps should be split equally in size in the div",
      "type": {
        "name": "bool"
      },
      "required": false
    }
  }
};
var ProgressIndicator$1 = ProgressIndicator;

export { ProgressIndicator$1 as default };
