"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.SetupStepCard = void 0;
var _react = _interopRequireDefault(require("react"));
var _designSystem = require("@wix/design-system");
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/SetupStepCard.tsx";
/**
 * Mobile step card. Phase-1 layout ("matching desktop"): shadowed card, the
 * focused card gets a soft blue surface, an "In progress" badge sits under the
 * title, completed cards strike the title and drop the CTA. Story-only
 * experiment knobs (peach shell / colored bullet / hero art / full-screen
 * modal) are intentionally omitted — those are consumer/page concerns.
 */
const SetupStepCard = ({
  step,
  isPrimary,
  expanded,
  onActivate,
  renderStepContent
}) => {
  const {
    translate: t
  } = (0, _react2.useWixPatternsContainer)();
  const isInProgress = step.status === 'in-progress';
  const isCompleted = step.status === 'completed';
  const isDisabled = step.status === 'disabled';
  const isInline = step.expansionMode === 'inline';
  const isInlineExpanded = expanded && isInline;

  // The whole card toggles inline steps; navigate steps act via the CTA.
  const clickable = isInline && !isCompleted && !isDisabled;
  return /*#__PURE__*/_react.default.createElement("div", {
    "data-hook": `setup-step-${step.id}`,
    className: (0, _SetupWidgetStCss.st)(_SetupWidgetStCss.classes.card, {
      primary: isPrimary,
      clickable
    }),
    onClick: clickable ? onActivate : undefined,
    role: clickable ? 'button' : undefined,
    tabIndex: clickable ? 0 : undefined,
    onKeyDown: clickable ? event => {
      if (event.key === 'Enter' || event.key === ' ') {
        event.preventDefault();
        onActivate();
      }
    } : undefined,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 51,
      columnNumber: 5
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    direction: "vertical",
    gap: "SP2",
    padding: "SP4",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 68,
      columnNumber: 7
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    gap: "SP2",
    verticalAlign: "top",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 69,
      columnNumber: 9
    }
  }, /*#__PURE__*/_react.default.createElement(_SetupStepIcon.SetupStepIcon, {
    status: step.status,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 70,
      columnNumber: 11
    }
  }), /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    direction: "vertical",
    gap: "SP1",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 71,
      columnNumber: 11
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
    dataHook: `setup-step-title-${step.id}`,
    size: "small",
    weight: isPrimary ? 'bold' : 'thin',
    skin: isDisabled ? 'disabled' : 'standard',
    secondary: isCompleted,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 72,
      columnNumber: 13
    }
  }, isCompleted ? /*#__PURE__*/_react.default.createElement("del", {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 79,
      columnNumber: 30
    }
  }, step.title) : step.title), isInProgress && /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 82,
      columnNumber: 15
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Badge, {
    size: "tiny",
    skin: "urgent",
    type: "transparent",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 83,
      columnNumber: 17
    }
  }, t('cairo.setupWidget.step.inProgress'))))), !isCompleted && step.description && /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
    size: "small",
    secondary: true,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 92,
      columnNumber: 11
    }
  }, step.description), isInlineExpanded && /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    dataHook: `setup-step-content-${step.id}`,
    direction: "vertical",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 98,
      columnNumber: 11
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    onClick: event => event.stopPropagation(),
    onKeyDown: event => event.stopPropagation(),
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 102,
      columnNumber: 13
    }
  }, renderStepContent == null ? void 0 : renderStepContent(step))), !isCompleted && !isInlineExpanded && step.ctaLabel && (() => {
    const ctaButton = /*#__PURE__*/_react.default.createElement(_designSystem.Button, {
      dataHook: `setup-step-cta-${step.id}`,
      fullWidth: true,
      size: "medium",
      priority: isPrimary ? 'primary' : 'secondary',
      disabled: isDisabled,
      onClick: event => {
        event.stopPropagation();
        onActivate();
      },
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 116,
        columnNumber: 15
      }
    }, step.ctaLabel);

    // Disabled steps explain why the CTA is disabled (G5).
    return isDisabled ? /*#__PURE__*/_react.default.createElement(_designSystem.Tooltip, {
      dataHook: `setup-step-disabled-tooltip-${step.id}`,
      content: step.disabledTooltip ??
      // Translation-key id stays `lockedTooltip` until the
      // Translation Center key is renamed (TC follow-up to T2).
      t('cairo.setupWidget.step.lockedTooltip'),
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 133,
        columnNumber: 15
      }
    }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 142,
        columnNumber: 17
      }
    }, ctaButton)) : ctaButton;
  })(), isCompleted && step.completedCtaLabel && !isDisabled && /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 150,
      columnNumber: 11
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.TextButton, {
    dataHook: `setup-step-cta-${step.id}`,
    size: "small",
    onClick: event => {
      event.stopPropagation();
      onActivate();
    },
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 151,
      columnNumber: 13
    }
  }, step.completedCtaLabel))));
};
exports.SetupStepCard = SetupStepCard;
//# sourceMappingURL=SetupStepCard.js.map