import { Col, Row } from "antd";
import ProText from "components/ProText";
import { Status } from "pages/checkout/hooks/types";
import type { CSSProperties } from "react";
import { Fragment, useMemo } from "react";
import { useTranslation } from "react-i18next";
import { colors } from "ThemeConstants";

interface StepperProps {
  statuses?: Status[];
}

export default function Stepper({ statuses = [] }: StepperProps) {
  const { t } = useTranslation();

  const labels = useMemo(
    () => [t("order.reserved"), t("order.prepare"), t("order.ready")],
    [t],
  );

  const activeIndex = useMemo(() => {
    const reachedStatuses = statuses.length > 0 ? statuses.length - 1 : 0;
    return Math.min(Math.max(reachedStatuses, 0), 2);
  }, [statuses.length]);

  const steps = useMemo(
    () =>
      Array.from({ length: 3 }, (_, index) => {
        const status = statuses[index];
        const label = status?.name || status?.alias || labels[index] || "";
        const isPending = index > activeIndex;
        return {
          key: status ? `status-${status.id}` : `placeholder-${index}`,
          label,
          isPending,
        };
      }),
    [activeIndex, labels, statuses],
  );

  return (
    <>
      <div
        style={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
        }}
      >
        <Row
          align={"middle"}
          style={{
            width: 330,
            maxWidth: "100%",
            position: "relative",
            padding: "12px",
          }}
        >
          {steps.map((step, index) => {
            const circleStyle: CSSProperties = step.isPending
              ? {
                  width: 12,
                  height: 12,
                  borderRadius: "50%",
                  backgroundColor: "#FFF",
                  border: "2px solid #BDBDBD",
                }
              : {
                  width: 12,
                  height: 12,
                  borderRadius: "50%",
                  backgroundColor: colors.primary,
                };

            const lineStyle: CSSProperties = {
              height: 1.5,
              backgroundColor: step.isPending ? "#BDBDBD" : colors.primary,
              margin: "0 8px",
            };

            return (
              <Fragment key={step.key}>
                <Col>
                  <div style={circleStyle}></div>
                </Col>
                {index < steps.length - 1 && (
                  <Col flex={"auto"}>
                    <div style={lineStyle}></div>
                  </Col>
                )}
              </Fragment>
            );
          })}
        </Row>
      </div>
      <div
        style={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
        }}
      >
        <Row
          align={"middle"}
          style={{
            width: 330,
            maxWidth: "100%",
            position: "relative",
            padding: "12px",
          }}
        >
          {steps.map((step, index) => (
            <Fragment key={`label-${step.key}`}>
              <Col>
                <ProText
                  style={{
                    fontWeight: 400,
                    fontStyle: "Regular",
                    fontSize: 14,
                    lineHeight: "140%",
                    letterSpacing: "0%",
                    textAlign: "center",
                    color: step.isPending ? "#99A2AE" : "#333333",
                  }}
                >
                  {step.label}
                </ProText>
              </Col>
              {index < steps.length - 1 && <Col flex={"auto"}></Col>}
            </Fragment>
          ))}
        </Row>
      </div>
    </>
  );
}
