"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.CardStep = void 0;
var _eui = require("@elastic/eui");
var _react = require("@emotion/react");
var _react2 = _interopRequireWildcard(require("react"));
var _icon_step = _interopRequireDefault(require("./images/icon_step.svg"));
var _icon_cross = _interopRequireDefault(require("./images/icon_cross.svg"));
var _translations = require("./translations");
var _helpers = require("./helpers");
var _badge = require("./badge");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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; }
/*
 * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
 * or more contributor license agreements. Licensed under the Elastic License
 * 2.0; you may not use this file except in compliance with the Elastic License
 * 2.0.
 */

const CardStepComponent = ({
  activeProducts,
  cardId,
  expandedSteps,
  finishedStepsByCard = new Set(),
  onStepButtonClicked,
  onStepClicked,
  sectionId,
  stepId
}) => {
  var _steps$find;
  const {
    euiTheme
  } = (0, _eui.useEuiTheme)();
  const expandStep = expandedSteps.has(stepId);
  const steps = (0, _react2.useMemo)(() => (0, _helpers.getStepsByActiveProduct)({
    activeProducts,
    cardId,
    sectionId
  }), [activeProducts, cardId, sectionId]);
  const {
    title,
    productLineRequired,
    description,
    splitPanel
  } = (_steps$find = steps === null || steps === void 0 ? void 0 : steps.find(step => step.id === stepId)) !== null && _steps$find !== void 0 ? _steps$find : {};
  const badges = (0, _react2.useMemo)(() => (0, _badge.getProductBadges)(productLineRequired), [productLineRequired]);
  const toggleStep = (0, _react2.useCallback)(e => {
    e.preventDefault();
    const newState = !expandStep;
    onStepClicked({
      stepId,
      cardId,
      sectionId,
      isExpanded: newState
    });
  }, [cardId, expandStep, onStepClicked, sectionId, stepId]);
  const isDone = finishedStepsByCard.has(stepId);
  const hasStepContent = description || splitPanel;
  const handleStepButtonClicked = (0, _react2.useCallback)(e => {
    e.preventDefault();
    onStepButtonClicked({
      stepId,
      cardId,
      sectionId,
      undo: isDone ? true : false
    });
  }, [cardId, isDone, onStepButtonClicked, sectionId, stepId]);
  return /*#__PURE__*/_react2.default.createElement(_eui.EuiPanel, {
    color: "plain",
    grow: false,
    hasShadow: false,
    borderRadius: "none",
    paddingSize: "l"
  }, /*#__PURE__*/_react2.default.createElement(_eui.EuiFlexGroup, {
    gutterSize: "s",
    css: (0, _react.css)`
          cursor: pointer;
        `
  }, /*#__PURE__*/_react2.default.createElement(_eui.EuiFlexItem, {
    grow: false,
    onClick: toggleStep
  }, /*#__PURE__*/_react2.default.createElement(_eui.EuiIcon, {
    "data-test-subj": `${stepId}-icon`,
    type: isDone ? 'checkInCircleFilled' : _icon_step.default,
    size: "m",
    color: euiTheme.colors.success
  })), /*#__PURE__*/_react2.default.createElement(_eui.EuiFlexItem, {
    grow: 1,
    onClick: toggleStep
  }, /*#__PURE__*/_react2.default.createElement("strong", null, /*#__PURE__*/_react2.default.createElement("span", {
    css: (0, _react.css)`
                padding-right: ${euiTheme.size.m};
              `
  }, title), badges.map(badge => /*#__PURE__*/_react2.default.createElement(_eui.EuiBadge, {
    key: `${stepId}-badge-${badge.id}`,
    color: "hollow"
  }, badge.name)))), /*#__PURE__*/_react2.default.createElement(_eui.EuiFlexItem, {
    grow: false,
    css: (0, _react.css)`
            align-items: end;
          `
  }, /*#__PURE__*/_react2.default.createElement("div", null, /*#__PURE__*/_react2.default.createElement(_eui.EuiButtonEmpty, {
    color: "primary",
    iconType: isDone ? _icon_cross.default : 'checkInCircleFilled',
    size: "xs",
    css: (0, _react.css)`
                border-radius: ${euiTheme.border.radius.medium};
                border: 1px solid ${euiTheme.colors.lightShade};
                .euiIcon {
                  inline-size: ${euiTheme.size.m};
                }
              `,
    onClick: handleStepButtonClicked
  }, isDone ? _translations.UNDO_MARK_AS_DONE_TITLE : _translations.MARK_AS_DONE_TITLE), /*#__PURE__*/_react2.default.createElement(_eui.EuiIcon, {
    size: "s",
    type: expandStep ? 'arrowDown' : 'arrowRight',
    css: (0, _react.css)`
                margin-left: ${euiTheme.base * 0.375}px;
              `,
    onClick: toggleStep
  })))), expandStep && hasStepContent && /*#__PURE__*/_react2.default.createElement(_react2.default.Fragment, null, /*#__PURE__*/_react2.default.createElement(_eui.EuiSpacer, {
    size: "l"
  }), /*#__PURE__*/_react2.default.createElement(_eui.EuiSplitPanel.Outer, {
    direction: "row",
    color: "plain",
    grow: false,
    hasShadow: false,
    borderRadius: "none"
  }, description && /*#__PURE__*/_react2.default.createElement(_eui.EuiSplitPanel.Inner, {
    paddingSize: "none",
    css: (0, _react.css)`
                  padding-left: ${euiTheme.size.l};
                `
  }, /*#__PURE__*/_react2.default.createElement(_eui.EuiText, {
    size: "s"
  }, description === null || description === void 0 ? void 0 : description.map((desc, index) => /*#__PURE__*/_react2.default.createElement("p", {
    "data-test-subj": `${stepId}-description-${index}`,
    key: `${stepId}-description-${index}`,
    className: "eui-displayBlock"
  }, desc)))), splitPanel && /*#__PURE__*/_react2.default.createElement(_eui.EuiSplitPanel.Inner, {
    "data-test-subj": "split-panel",
    paddingSize: "none",
    css: (0, _react.css)`
                  padding-left: ${euiTheme.size.m};
                `
  }, splitPanel))));
};
CardStepComponent.displayName = 'CardStepComponent';
const CardStep = /*#__PURE__*/_react2.default.memo(CardStepComponent);
exports.CardStep = CardStep;