"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.SetupWidget = void 0;
var _react = _interopRequireDefault(require("react"));
var _mobxReactLite = require("mobx-react-lite");
var _designSystem = require("@wix/design-system");
var _react2 = require("@wix/bex-core/react");
var _CardContainer = require("../CardContainer");
var _useIsMobile = require("../../hooks/useIsMobile");
var _useIntersectionObserver = require("../../hooks/useIntersectionObserver");
var _SetupWidgetHeader = require("./SetupWidgetHeader");
var _SetupStepRow = require("./SetupStepRow");
var _SetupStepCard = require("./SetupStepCard");
var _SetupStepGroup = require("./SetupStepGroup");
var _AllCompleteState = require("./AllCompleteState");
var _SetupWidgetSkeleton = require("./SetupWidgetSkeleton");
var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/cairo/dist/cjs/components/SetupWidget/SetupWidget.tsx";
// Fires `onView` once when the wrapped step scrolls into view. Only mounted
// when the consumer passes `onStepView`, so view tracking adds no DOM/observer
// overhead otherwise.
const StepViewTracker = ({
  stepId,
  onView,
  children
}) => {
  const {
    elementRef
  } = (0, _useIntersectionObserver.useIntersectionObserver)(onView);
  return /*#__PURE__*/_react.default.createElement("div", {
    ref: elementRef,
    "data-hook": `setup-step-view-${stepId}`,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 72,
      columnNumber: 5
    }
  }, children);
};
const _SetupWidget = ({
  state,
  renderStepContent,
  onStepClick,
  onCompletedStepClick,
  onStepView,
  onAllCompleteClick,
  renderError,
  dataHook
}) => {
  const {
    translate: t
  } = (0, _react2.useWixPatternsContainer)();
  const isMobile = (0, _useIsMobile.useIsMobile)();
  const {
    status
  } = state._loadTask.status;
  const activateStep = step => {
    // Completed steps fire their own action (never expand) — distinct from the
    // active/navigate `onStepClick`.
    if (step.status === 'completed') {
      onCompletedStepClick == null || onCompletedStepClick(step);
      return;
    }
    if (step.expansionMode === 'inline') {
      state._toggleStep(step.id);
    } else {
      onStepClick == null || onStepClick(step);
    }
  };

  // Children of an aggregated group are leaf steps — they never toggle/expand;
  // completed children fire the completed action, the rest navigate.
  const activateChild = child => {
    if (child.status === 'completed') {
      onCompletedStepClick == null || onCompletedStepClick(child);
    } else {
      onStepClick == null || onStepClick(child);
    }
  };
  const renderLeaf = (step, isChild = false) => {
    const expanded = !isChild && step.expansionMode === 'inline' && state._expandedStepId === step.id;
    const onActivate = () => isChild ? activateChild(step) : activateStep(step);
    return isMobile ? /*#__PURE__*/_react.default.createElement(_SetupStepCard.SetupStepCard, {
      key: step.id,
      step: step,
      isPrimary: !isChild && step.id === state._primaryStepId,
      expanded: expanded,
      onActivate: onActivate,
      renderStepContent: renderStepContent,
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 128,
        columnNumber: 7
      }
    }) : /*#__PURE__*/_react.default.createElement(_SetupStepRow.SetupStepRow, {
      key: step.id,
      step: step,
      isFocused: !isChild && (step.id === state._primaryStepId || expanded),
      expanded: expanded,
      onActivate: onActivate,
      renderStepContent: renderStepContent,
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 137,
        columnNumber: 7
      }
    });
  };

  // All-complete is a distinct success surface with its own card.
  if (status === 'success' && state._isAllComplete) {
    return /*#__PURE__*/_react.default.createElement(_AllCompleteState.AllCompleteState, {
      dataHook: dataHook,
      onCtaClick: onAllCompleteClick,
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 151,
        columnNumber: 7
      }
    });
  }

  // Built-in loading skeleton, shaped like the widget (desktop card / mobile
  // bare) so there's no layout jump when data resolves.
  if (status === 'idle' || status === 'loading') {
    return /*#__PURE__*/_react.default.createElement(_SetupWidgetSkeleton.SetupWidgetSkeleton, {
      isMobile: isMobile,
      dataHook: dataHook,
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 158,
        columnNumber: 12
      }
    });
  }

  // Consumer-supplied error UI fully replaces the default error card.
  if (status === 'error' && renderError) {
    var _state$_loadTask$erro;
    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, renderError({
      retry: () => state._retry(),
      error: (_state$_loadTask$erro = state._loadTask.errorStatus) == null ? void 0 : _state$_loadTask$erro.error
    }));
  }
  const header = /*#__PURE__*/_react.default.createElement(_SetupWidgetHeader.SetupWidgetHeader, {
    title: state._title,
    completedCount: state._completedCount,
    totalCount: state._totalCount,
    progressPercentage: state._progressPercentage,
    isMobile: isMobile,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 174,
      columnNumber: 5
    }
  });
  const list = /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    direction: "vertical",
    gap: isMobile ? 'SP3' : 'SP1',
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 184,
      columnNumber: 5
    }
  }, state.steps.map(step => {
    var _step$steps;
    const node = (_step$steps = step.steps) != null && _step$steps.length ? /*#__PURE__*/_react.default.createElement(_SetupStepGroup.SetupStepGroup, {
      step: step,
      isMobile: isMobile,
      expanded: state._expandedStepId === step.id,
      isPrimary: step.id === state._primaryStepId,
      onToggle: () => state._toggleStep(step.id),
      renderChild: child => renderLeaf(child, true),
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 187,
        columnNumber: 11
      }
    }) : renderLeaf(step);
    return onStepView ? /*#__PURE__*/_react.default.createElement(StepViewTracker, {
      key: step.id,
      stepId: step.id,
      onView: () => onStepView(step),
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 200,
        columnNumber: 11
      }
    }, node) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
      key: step.id,
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 208,
        columnNumber: 11
      }
    }, node);
  }));
  const body = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, header, list);

  // Mobile success renders bare — no outer card (matches the mobile design;
  // the consumer composes the surrounding page). Loading / error still flow
  // through CardContainer so the widget owns those states everywhere.
  if (isMobile && status === 'success') {
    return /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
      dataHook: dataHook,
      direction: "vertical",
      gap: "SP3",
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 226,
        columnNumber: 7
      }
    }, body);
  }
  return /*#__PURE__*/_react.default.createElement(_CardContainer.CardContainer, {
    dataHook: dataHook,
    status: status,
    errorState: {
      dataHook: 'error-state',
      title: t('cairo.setupWidget.error.title'),
      subtitle: t('cairo.setupWidget.error.subtitle'),
      action: {
        text: t('cairo.setupWidget.error.cta'),
        onClick: () => state._retry()
      }
    },
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 233,
      columnNumber: 5
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    direction: "vertical",
    padding: "SP6",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 246,
      columnNumber: 7
    }
  }, body));
};
const SetupWidget = exports.SetupWidget = (0, _mobxReactLite.observer)(_SetupWidget);
//# sourceMappingURL=SetupWidget.js.map