import "./onboardingStepListItem.css";

export type OnboardingStepState = "finished" | "active" | "inactive";

export type OnboardingStepListItemProps = {
  className?: string;
  dir?: "ltr" | "rtl";
  label?: string;
  showLeadingLine?: boolean;
  showTrailingLine?: boolean;
  state?: OnboardingStepState;
};

export function OnboardingStepListItem({
  className = "",
  dir = "ltr",
  label,
  showLeadingLine = true,
  showTrailingLine = true,
  state = "finished",
}: OnboardingStepListItemProps) {
  const rtl = dir === "rtl";
  const isFinished = state === "finished";
  const isActive = state === "active";
  const isInactive = state === "inactive";

  return (
    <div
      className={[
        "ds-onboarding-step",
        `ds-onboarding-step--${state}`,
        rtl ? "ds-onboarding-step--rtl" : "ds-onboarding-step--ltr",
        className,
      ]
        .filter(Boolean)
        .join(" ")}
      dir={dir}
    >
      <span className="ds-onboarding-step__line-wrap" aria-hidden="true">
        {isFinished && showLeadingLine && <span className="ds-onboarding-step__line ds-onboarding-step__line--leading" />}
        {isFinished && <CheckCircleIcon />}
        {isFinished && showTrailingLine && <span className="ds-onboarding-step__line ds-onboarding-step__line--trailing" />}
        {isActive && <span className="ds-onboarding-step__line ds-onboarding-step__line--active" />}
        {isInactive && <span className="ds-onboarding-step__line ds-onboarding-step__line--inactive" />}
      </span>
      {label && <span className="ds-onboarding-step__label">{label}</span>}
    </div>
  );
}

function CheckCircleIcon() {
  return (
    <svg
      className="ds-onboarding-step__check"
      fill="none"
      height="20"
      viewBox="0 0 20 20"
      width="20"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M10 1.667A8.333 8.333 0 1 1 10 18.333 8.333 8.333 0 0 1 10 1.667Zm-.831 11.667 5.89-5.893-1.179-1.178-4.711 4.714-2.357-2.357-1.179 1.178 3.536 3.536Z"
        fill="currentColor"
      />
    </svg>
  );
}
