"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.SetupStepGroup = void 0;
var _react = _interopRequireDefault(require("react"));
var _designSystem = require("@wix/design-system");
var _wixUiIconsCommon = require("@wix/wix-ui-icons-common");
var _react2 = require("@wix/bex-core/react");
var _SetupStepIcon = require("./SetupStepIcon");
var _SetupWidgetStCss = require("./SetupWidget.st.css.js");
var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/cairo/dist/cjs/components/SetupWidget/SetupStepGroup.tsx";
/**
 * Aggregated group row (e.g. "Stores", "Bookings"). Collapsed: icon + title +
 * an "x/y" counter + chevron. Expanded: the children render indented below.
 * Completion / in-progress are derived from the children (mirrors
 * `AggregatedByGroupStep` in dashboard-setup). The toggle lives on the header
 * only, so clicking a child doesn't collapse the group.
 */
const SetupStepGroup = ({
  step,
  isMobile,
  expanded,
  isPrimary,
  onToggle,
  renderChild
}) => {
  const {
    translate: t
  } = (0, _react2.useWixPatternsContainer)();
  const children = step.steps ?? [];
  const total = children.length;
  const completed = children.filter(c => c.status === 'completed').length;
  const allCompleted = total > 0 && completed === total;
  const anyInProgress = children.some(c => c.status === 'in-progress');
  const isFocused = expanded || isPrimary;
  const Chevron = expanded ? _wixUiIconsCommon.ChevronUp : _wixUiIconsCommon.ChevronDown;
  const header = /*#__PURE__*/_react.default.createElement("div", {
    role: "button",
    tabIndex: 0,
    onClick: onToggle,
    onKeyDown: event => {
      if (event.key === 'Enter' || event.key === ' ') {
        event.preventDefault();
        onToggle();
      }
    },
    style: {
      cursor: 'pointer'
    },
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 47,
      columnNumber: 5
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    align: "space-between",
    verticalAlign: isMobile ? 'top' : 'middle',
    width: "100%",
    minHeight: "30px",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 59,
      columnNumber: 7
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    minHeight: "24px",
    verticalAlign: isMobile ? 'top' : 'middle',
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 65,
      columnNumber: 9
    }
  }, /*#__PURE__*/_react.default.createElement(_SetupStepIcon.SetupStepIcon, {
    status: allCompleted ? 'completed' : 'upcoming',
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 66,
      columnNumber: 11
    }
  }), /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    paddingLeft: "SP2",
    direction: isMobile ? 'vertical' : 'horizontal',
    verticalAlign: isMobile ? 'top' : 'middle',
    gap: "SP1",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 69,
      columnNumber: 11
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
    dataHook: `setup-step-title-${step.id}`,
    size: "small",
    weight: isFocused ? 'bold' : 'thin',
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 75,
      columnNumber: 13
    }
  }, step.title), anyInProgress && !allCompleted && /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    marginTop: isMobile ? undefined : '2px',
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 83,
      columnNumber: 15
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Badge, {
    size: "tiny",
    skin: "urgent",
    type: "transparent",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 84,
      columnNumber: 17
    }
  }, t('cairo.setupWidget.step.inProgress'))))), /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    verticalAlign: "middle",
    gap: "SP1",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 91,
      columnNumber: 9
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Tag, {
    id: `setup-step-counter-${step.id}`,
    skin: "neutral",
    removable: false,
    size: "small",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 92,
      columnNumber: 11
    }
  }, t('cairo.setupWidget.aggregated.counter', {
    completed,
    total
  })), /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    dataHook: `setup-step-chevron-${step.id}`,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 100,
      columnNumber: 11
    }
  }, /*#__PURE__*/_react.default.createElement(Chevron, {
    width: "20",
    height: "20",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 101,
      columnNumber: 13
    }
  })))));
  const childList = expanded && /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    dataHook: `setup-step-children-${step.id}`,
    direction: "vertical",
    gap: isMobile ? 'SP3' : 'SP1',
    paddingLeft: isMobile ? 'SP4' : 'SP5',
    marginTop: isMobile ? 'SP3' : 'SP1',
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 109,
      columnNumber: 5
    }
  }, children.map(child => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
    key: child.id,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 117,
      columnNumber: 9
    }
  }, renderChild(child))));
  if (isMobile) {
    return /*#__PURE__*/_react.default.createElement("div", {
      "data-hook": `setup-step-${step.id}`,
      className: (0, _SetupWidgetStCss.st)(_SetupWidgetStCss.classes.card),
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 124,
        columnNumber: 7
      }
    }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
      direction: "vertical",
      padding: "SP4",
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 125,
        columnNumber: 9
      }
    }, header, childList));
  }
  return /*#__PURE__*/_react.default.createElement("div", {
    "data-hook": `setup-step-${step.id}`,
    className: (0, _SetupWidgetStCss.st)(_SetupWidgetStCss.classes.row),
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 134,
      columnNumber: 5
    }
  }, header, childList);
};
exports.SetupStepGroup = SetupStepGroup;
//# sourceMappingURL=SetupStepGroup.js.map