"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var TimelineItem_exports = {};
__export(TimelineItem_exports, {
  default: () => TimelineItem_default
});
module.exports = __toCommonJS(TimelineItem_exports);
var import_react = __toESM(require("react"));
var import_styled_components = __toESM(require("styled-components"));
var import__2 = require("../..");
var import__3 = require("../../..");
var import_Tag = __toESM(require("../../../Tag"));
var import_InfiniteLoader = __toESM(require("../../../loaders/InfiniteLoader"));
var import_TimelineIndicator = __toESM(require("./TimelineIndicator"));
const getContainerBackground = (theme, status, activeBackground) => {
  if (status === "completed") {
    return "transparent";
  } else if (status === "active") {
    return activeBackground || theme.colors.neutral.c20;
  }
  return "transparent";
};
const getContainerBorder = (theme, status, isLastItem) => {
  if (status === "completed") {
    return "transparent";
  } else if (isLastItem && status === "active") {
    return theme.colors.success.c50;
  } else if (status === "active") {
    return theme.colors.neutral.c40;
  }
  return "transparent";
};
const Container = (0, import_styled_components.default)(import__2.Flex)`
  position: relative;
  flex: 1;
  border-radius: ${(p) => p.theme.radii[2]}px;
  background: ${(p) => getContainerBackground(p.theme, p.status, p.activeBackground)};
  border: 1px solid ${(p) => getContainerBorder(p.theme, p.status, p.isLastItem)};
`;
const TextContainer = (0, import_styled_components.default)(import__2.Flex)`
  flex: 1;
  padding: 20px 16px;
`;
const TimelineIndicatorContentHeader = (0, import_styled_components.default)(import__2.Flex)`
  justify-content: space-between;
  align-items: center;
`;
function TimelineItem({ item, isFirstItem, isLastItem, onClick, isNeutral }) {
  const { colors } = (0, import_styled_components.useTheme)();
  return /* @__PURE__ */ import_react.default.createElement(import__2.Flex, { flexDirection: "row", onClick, flex: 1 }, /* @__PURE__ */ import_react.default.createElement(
    import_TimelineIndicator.default,
    {
      status: item.status,
      isFirstItem,
      isLastItem,
      mr: 4,
      isNeutral
    }
  ), /* @__PURE__ */ import_react.default.createElement(
    Container,
    {
      status: item.status,
      isLastItem: isLastItem && !isNeutral,
      overflow: "hidden",
      activeBackground: item.activeBackground
    },
    item.status === "active" ? item.background : null,
    /* @__PURE__ */ import_react.default.createElement(TextContainer, { mb: 4, flexDirection: "column", zIndex: 1 }, /* @__PURE__ */ import_react.default.createElement(TimelineIndicatorContentHeader, { height: "20px" }, /* @__PURE__ */ import_react.default.createElement(
      import__3.Text,
      {
        variant: "body",
        fontWeight: item.status === "active" ? "semiBold" : "medium",
        color: item.status !== "inactive" && isLastItem && !isNeutral ? "success.c70" : item.status === "active" ? "primary.c80" : "neutral.c70"
      },
      item.title
    ), (item == null ? void 0 : item.estimatedTime) && item.status === "active" && /* @__PURE__ */ import_react.default.createElement(
      import_Tag.default,
      {
        size: "small",
        type: "opacity",
        active: true,
        disabled: true,
        textProps: { color: colors.neutral.c100 }
      },
      `${item.estimatedTime / 60} min`
    ) || (item == null ? void 0 : item.hasLoader) && item.status === "active" && /* @__PURE__ */ import_react.default.createElement(import_InfiniteLoader.default, { size: 30 })), item.renderBody && item.status === "active" && /* @__PURE__ */ import_react.default.createElement(import__2.Box, { position: "relative", pt: 6 }, item.renderBody(item.status === "active")))
  ));
}
var TimelineItem_default = import_react.default.memo(TimelineItem);
//# sourceMappingURL=TimelineItem.js.map
