"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.SetupStepRow = 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/SetupStepRow.tsx";
/**
 * Desktop step row. Recreated from the existing Setup widget:
 * - completed → green check, struck-through title, optional completed CTA
 * - disabled → muted bullet + disabled CTA (permission-denied)
 * - in-progress → "In progress" badge next to the title
 * - focused → blue surface, bold title, primary CTA
 * - hoverable rows tint blue on hover (handled in Stylable)
 */
const SetupStepRow = ({
  step,
  isFocused,
  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 isInlineExpanded = expanded && step.expansionMode === 'inline';
  const showCta = !isCompleted && !!step.ctaLabel && !isInlineExpanded;
  // Completed steps stay actionable when they carry a completed CTA (G2).
  const showCompletedCta = isCompleted && !!step.completedCtaLabel && !isDisabled;
  const clickable = !isCompleted && !isDisabled || showCompletedCta;
  const hoverable = !isFocused && !isCompleted && !isDisabled;
  const handleClick = clickable ? onActivate : undefined;
  return /*#__PURE__*/_react.default.createElement("div", {
    "data-hook": `setup-step-${step.id}`,
    className: (0, _SetupWidgetStCss.st)(_SetupWidgetStCss.classes.row, {
      focused: isFocused,
      hoverable,
      clickable
    }),
    onClick: handleClick,
    onKeyDown: clickable ? event => {
      if (event.key === 'Enter' || event.key === ' ') {
        event.preventDefault();
        onActivate();
      }
    } : undefined,
    role: clickable ? 'button' : undefined,
    tabIndex: clickable ? 0 : undefined,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 58,
      columnNumber: 5
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    align: "space-between",
    verticalAlign: "middle",
    width: "100%",
    minHeight: "30px",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 82,
      columnNumber: 7
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    minHeight: "24px",
    verticalAlign: "middle",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 88,
      columnNumber: 9
    }
  }, /*#__PURE__*/_react.default.createElement(_SetupStepIcon.SetupStepIcon, {
    status: step.status,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 89,
      columnNumber: 11
    }
  }), /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    paddingLeft: "SP2",
    paddingRight: "SP2",
    verticalAlign: "middle",
    gap: "SP1",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 90,
      columnNumber: 11
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
    dataHook: `setup-step-title-${step.id}`,
    size: "small",
    skin: isDisabled ? 'disabled' : 'standard',
    weight: isFocused ? 'bold' : 'thin',
    secondary: isCompleted,
    light: isCompleted,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 96,
      columnNumber: 13
    }
  }, isCompleted ? /*#__PURE__*/_react.default.createElement("del", {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 104,
      columnNumber: 30
    }
  }, step.title) : step.title), isInProgress && !isInlineExpanded && /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    marginTop: "2px",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 107,
      columnNumber: 15
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Badge, {
    size: "tiny",
    skin: "urgent",
    type: "transparent",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 108,
      columnNumber: 17
    }
  }, t('cairo.setupWidget.step.inProgress'))))), showCta && (() => {
    const ctaNode = /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
      verticalAlign: "middle",
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 118,
        columnNumber: 15
      }
    }, /*#__PURE__*/_react.default.createElement(_designSystem.Button, {
      dataHook: `setup-step-cta-${step.id}`,
      size: "small",
      priority: !isDisabled && !isFocused ? 'secondary' : 'primary',
      disabled: isDisabled,
      ellipsis: false,
      onClick: event => {
        event.stopPropagation();
        onActivate();
      },
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 119,
        columnNumber: 17
      }
    }, 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: 137,
        columnNumber: 15
      }
    }, ctaNode) : ctaNode;
  })(), showCompletedCta && /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    verticalAlign: "middle",
    marginRight: "SP2",
    className: (0, _SetupWidgetStCss.st)(_SetupWidgetStCss.classes.completedCta),
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 153,
      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: 158,
      columnNumber: 13
    }
  }, step.completedCtaLabel))), isInlineExpanded && /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    dataHook: `setup-step-content-${step.id}`,
    direction: "vertical",
    paddingLeft: "SP5",
    paddingRight: "SP1",
    paddingBottom: "SP1",
    marginTop: "SP2",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 172,
      columnNumber: 9
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    marginBottom: "SP2",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 180,
      columnNumber: 11
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Divider, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 181,
      columnNumber: 13
    }
  })), /*#__PURE__*/_react.default.createElement("div", {
    onClick: event => event.stopPropagation(),
    onKeyDown: event => event.stopPropagation(),
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 186,
      columnNumber: 11
    }
  }, renderStepContent == null ? void 0 : renderStepContent(step))));
};
exports.SetupStepRow = SetupStepRow;
//# sourceMappingURL=SetupStepRow.js.map