"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.StepperItem = exports.StepDivider = exports.Stepper = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _CheckIcon = _interopRequireDefault(require("mdi-react/CheckIcon"));

var _react = _interopRequireWildcard(require("react"));

var _Box = require("../Box");

var _Button = require("../Button");

var _Tabs = require("../Tabs");

var _Text = require("../Text");

var _styles = _interopRequireDefault(require("./styles"));

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

var __jsx = _react["default"].createElement;

function getSteps() {
  return ['Select campaign settings', 'Create an ad group', 'Create an ad'];
}

var Stepper = function Stepper(_ref) {
  var _ref$steps = _ref.steps,
      steps = _ref$steps === void 0 ? getSteps() : _ref$steps,
      activeStep = _ref.activeStep,
      setActiveStep = _ref.setActiveStep,
      completed = _ref.completed,
      _ref$orientation = _ref.orientation,
      orientation = _ref$orientation === void 0 ? 'horizontal' : _ref$orientation,
      children = _ref.children,
      props = (0, _objectWithoutProperties2["default"])(_ref, ["steps", "activeStep", "setActiveStep", "completed", "orientation", "children"]);

  // const totalSteps = () => {
  //     return steps.length;
  // };
  // const completedSteps = () => {
  //     return Object.keys(completed).length;
  // };
  // const isLastStep = () => {
  //     return activeStep === totalSteps() - 1;
  // };
  // const allStepsCompleted = () => {
  //     return completedSteps() === totalSteps();
  // };
  // const handleNext = () => {
  //     const newActiveStep =
  //         isLastStep() && !allStepsCompleted()
  //             ? // It's the last step, but not all steps have been completed,
  //               // find the first step that has been completed
  //               steps.findIndex((step, i) => !(i in completed))
  //             : activeStep + 1;
  //     setActiveStep(newActiveStep);
  // };
  // const handleBack = () => {
  //     setActiveStep(prevActiveStep => prevActiveStep - 1);
  // };
  var handleStep = function handleStep(step) {
    setActiveStep(step);
  }; // const handleComplete = () => {
  //     const newCompleted = completed;
  //     newCompleted[activeStep] = true;
  //     setCompleted(newCompleted);
  //     handleNext();
  // };
  // const handleReset = () => {
  //     setActiveStep(0);
  //     setCompleted({});
  // };


  var _useStepperStyle = (0, _styles["default"])({
    orientation: orientation
  }),
      stepperStyleProps = _useStepperStyle.root;

  return __jsx(_Tabs.Tabs, (0, _extends2["default"])({
    orientation: orientation
  }, stepperStyleProps, props), __jsx(_Tabs.TabList, {
    justifyContent: "flex-start"
  }, _react.Children.map(children, function (child, index) {
    if (! /*#__PURE__*/(0, _react.isValidElement)(child)) {
      return null;
    }

    var isLast = index === _react.Children.count(children) - 1;
    var isCompleted = completed[index];
    var isActive = activeStep === index;
    return /*#__PURE__*/(0, _react.cloneElement)(child, {
      onClick: function onClick() {
        if (child.props.onClick) {
          child.props.onClick();
        } else {
          handleStep(index);
        }
      },
      index: index,
      showDivider: !isLast,
      orientation: orientation,
      isCompleted: isCompleted,
      isActive: isActive
    });
  })));
};

exports.Stepper = Stepper;

var StepDivider = function StepDivider(_ref2) {
  var size = _ref2.size,
      buttonSize = _ref2.buttonSize,
      orientation = _ref2.orientation,
      isCompleted = _ref2.isCompleted,
      spacing = _ref2.spacing,
      props = (0, _objectWithoutProperties2["default"])(_ref2, ["size", "buttonSize", "orientation", "isCompleted", "spacing"]);

  var _useStepperStyle2 = (0, _styles["default"])({
    size: size,
    spacing: spacing,
    isCompleted: isCompleted,
    buttonSize: buttonSize,
    orientation: orientation
  }),
      dividerStyleProps = _useStepperStyle2.divider;

  return __jsx(_Box.Box, (0, _extends2["default"])({
    as: "hr",
    "aria-orientation": orientation
  }, dividerStyleProps, props));
};

exports.StepDivider = StepDivider;
var sizeProps = {
  sm: {
    button: 4,
    divider: 2
  },
  md: {
    button: 6,
    divider: 3
  }
};

var StepperItem = /*#__PURE__*/_react["default"].forwardRef(function (_ref3, ref) {
  var onClick = _ref3.onClick,
      showDivider = _ref3.showDivider,
      orientation = _ref3.orientation,
      isCompleted = _ref3.isCompleted,
      isActive = _ref3.isActive,
      _ref3$spacing = _ref3.spacing,
      spacing = _ref3$spacing === void 0 ? 8 : _ref3$spacing,
      children = _ref3.children,
      _ref3$size = _ref3.size,
      size = _ref3$size === void 0 ? 'sm' : _ref3$size,
      rest = (0, _objectWithoutProperties2["default"])(_ref3, ["onClick", "showDivider", "orientation", "isCompleted", "isActive", "spacing", "children", "size"]);
  var _sizeProps$size = sizeProps[size],
      button = _sizeProps$size.button,
      divider = _sizeProps$size.divider;

  var _useStepperStyle3 = (0, _styles["default"])({
    size: size,
    isCompleted: isCompleted,
    orientation: orientation,
    isActive: isActive,
    buttonSize: button
  }),
      itemStyleProps = _useStepperStyle3.item,
      outerStyleProps = _useStepperStyle3.outer,
      checkStyleProps = _useStepperStyle3.check;

  return __jsx(_react["default"].Fragment, null, __jsx(_Tabs.Tab, (0, _extends2["default"])({
    onClick: onClick
  }, outerStyleProps, {
    ref: ref
  }, rest), __jsx(_Button.Button, (0, _extends2["default"])({
    iconOnly: true
  }, itemStyleProps), isCompleted && !isActive && __jsx(_Box.Box, checkStyleProps, __jsx(_CheckIcon["default"], {
    size: 12
  })), isActive && __jsx(_Box.Box, {
    w: "4px",
    h: "4px",
    bg: "primary.500",
    rounded: "full",
    zIndex: "base"
  })), __jsx(_Text.Text, {
    ml: orientation === 'vertical' && 'spacing',
    mt: orientation === 'horizontal' && 'spacing-sm',
    state: isActive ? 'emphasis' : 'faint'
  }, children), showDivider && orientation === 'horizontal' && __jsx(StepDivider, {
    size: divider,
    buttonSize: button,
    orientation: orientation,
    isCompleted: isCompleted,
    spacing: spacing
  })), showDivider && orientation === 'vertical' && __jsx(StepDivider, {
    size: divider,
    buttonSize: button,
    orientation: orientation,
    isCompleted: isCompleted,
    spacing: spacing
  }));
});

exports.StepperItem = StepperItem;
//# sourceMappingURL=Stepper.js.map