"use client";

import { useTranslations } from "next-intl";
import clsx from "clsx";

import { Icon, IconName, Typography } from "@/components/ui";
import { BlurComponent } from "@/components/widgets";
import { useDynamicSize } from "@/hooks/DOM/useDynamicSize";

import styles from "./Progress.module.scss";

interface IProgressProps {
  items: string[];
  activeItemIndex: number;
}

export default function Progress({ items, activeItemIndex }: IProgressProps) {
  const t = useTranslations("AdditionalPurchases.Progress");

  const finalStep = t("final_step");
  const allItems = [...items, finalStep];

  const { width: containerWidth, elementRef } = useDynamicSize<HTMLDivElement>({
    defaultWidth: 327,
  });

  const firstChild = elementRef.current?.childNodes[0] as HTMLElement;

  const lastChild = elementRef.current?.childNodes[
    allItems.length - 1
  ] as HTMLElement;

  const leftIndent =
    ((firstChild?.getBoundingClientRect().width || 100) - 32) / 2;

  const rightIndent =
    ((lastChild?.getBoundingClientRect().width || 76) - 32) / 2;

  return (
    <BlurComponent
      isActiveBlur={true}
      className={styles.container}
      gradientClassName={styles.blurGradient}
      ref={elementRef}
    >
      {allItems.map((item, index) => (
        <div
          key={index}
          className={clsx(
            styles.item,
            activeItemIndex === index && styles.active,
            activeItemIndex > index && styles.done
          )}
        >
          <div className={styles.marker}>
            {activeItemIndex > index && styles.done && (
              <Icon
                name={IconName.Check}
                color="#fff"
                size={{
                  width: 12,
                  height: 12,
                }}
              />
            )}
            <Typography as="span" className={styles.number}>
              {index + 1}
            </Typography>
          </div>
          <Typography as="p" align="center" className={styles.text}>
            {item}
          </Typography>
        </div>
      ))}
      <div
        className={styles.connector}
        style={{
          width: containerWidth - leftIndent - rightIndent,
          left: leftIndent,
          background: activeItemIndex
            ? `
            linear-gradient(
              90deg,
            #2866ed 0%,
            #2866ed ${((activeItemIndex - 1) / items.length) * 100}%,
            #c4d9fc ${(activeItemIndex / items.length) * containerWidth + 16}px,
            #E2E8F0 100%)
            `
            : "#E2E8F0",
        }}
      />
    </BlurComponent>
  );
}
