import { h } from "@stencil/core";
import { CheckMark } from "./SVGs";
function Dot({ active, completed, incomplete, stage, }) {
  return (h("div", { style: {
      display: "flex",
    } },
    h("div", { style: {
        backgroundColor: completed
          ? "var(--sqm-success-color-icon)"
          : incomplete
            ? "var(--sqm-border-color)"
            : "white",
        border: active
          ? "1px solid var(--sqm-success-color-border)"
          : incomplete
            ? "1px solid var(--sqm-border-color)"
            : "1px solid var(--sqm-success-color-border)",
        borderRadius: "50%",
        width: "23px",
        height: "23px",
        margin: "-11px",
        zIndex: "1",
        boxSizing: "content-box",
      } }, completed ? (h("div", { style: { top: "-10.5%", left: "23.5%", position: "relative" } },
      h(CheckMark, null))) : (h("div", { style: {
        color: active
          ? "var(--sqm-success-color-border)"
          : "var(--sqm-text-subdued)",
        width: "23px",
        lineHeight: "24px",
        textAlign: "center",
        position: "relative",
      } }, stage + 1)))));
}
function ProgressLine({ incomplete = false, active = false, invisible = false, }) {
  return (h("div", { style: {
      content: "''",
      flex: "0.5 0.5 0",
      height: "4px",
      borderRadius: "4px",
      background: incomplete || active
        ? "var(--sqm-border-color)"
        : "var(--sqm-success-color-icon)",
      position: "relative",
      bottom: "0",
      left: "0",
      display: "flex",
      justifyContent: "center",
      columnGap: "50px",
      marginRight: "-2px",
      boxSizing: "content-box",
      opacity: invisible ? "0" : "1",
    } }));
}
function Progress({ active, completed, incomplete, stage }) {
  return [
    h(ProgressLine, { incomplete: incomplete, invisible: stage === 0 }),
    h(Dot, { active: active, completed: completed, incomplete: incomplete, stage: stage }),
    h(ProgressLine, { incomplete: incomplete, active: active, invisible: stage === 2 }),
  ];
}
export function ProgressBar({ stageCount, currentStage, }) {
  return (h("div", { style: { display: "flex", columnGap: "-2px" } }, Array.from(Array(stageCount).keys()).map((stage) => (h(Progress, { active: currentStage === stage, completed: currentStage > stage, incomplete: currentStage < stage, stage: stage })))));
}
