"use client";

import { CircularProgressbar } from "react-circular-progressbar";
import { useTranslations } from "next-intl";

import { Typography } from "@/components/ui";
import { emailMarketingCompV2Images } from "@/shared/constants/images";
import { translatePathEmailMarketingSoulmateV1 } from "@/shared/constants/translate";

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

interface IBar {
  text: string;
  percent: string;
  colors: {
    path: string;
    trail: string;
  };
}

interface ISearchCompatiblePartnerCardProps {
  username: string;
}

export default function SearchCompatiblePartnerCard({
  username,
}: ISearchCompatiblePartnerCardProps) {
  const t = useTranslations(
    translatePathEmailMarketingSoulmateV1(
      "Landing.what-get.search-compatible-partner"
    )
  );

  const bars = t.raw("content.bars") as Record<string, IBar>;

  return (
    <div className={styles.card}>
      <div className={styles.header}>
        <div className={styles["icon-container"]}>💞</div>
        <Typography as="p" align="left" className={styles.title}>
          {t("header.title")}
        </Typography>
      </div>
      <div className={styles.content}>
        <div className={styles.partners}>
          <div className={styles.partner}>
            <div className={styles.avatar}>
              {username.charAt(1).toUpperCase()}
            </div>
            <Typography as="p" className={styles.name}>
              {username.slice(0, 7)}...
            </Typography>
          </div>
          <svg
            width="21"
            height="18"
            viewBox="0 0 21 18"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
            style={{
              marginTop: "68px",
            }}
          >
            <path
              d="M2.0625 10.2343L9.12109 16.8242C9.41406 17.0976 9.80078 17.25 10.2031 17.25C10.6055 17.25 10.9922 17.0976 11.2852 16.8242L18.3438 10.2343C19.5312 9.12887 20.2031 7.57809 20.2031 5.957V5.73043C20.2031 2.99997 18.2305 0.67184 15.5391 0.222621C13.7578 -0.0742537 11.9453 0.507778 10.6719 1.78122L10.2031 2.24997L9.73438 1.78122C8.46094 0.507778 6.64844 -0.0742537 4.86719 0.222621C2.17578 0.67184 0.203125 2.99997 0.203125 5.73043V5.957C0.203125 7.57809 0.875 9.12887 2.0625 10.2343Z"
              fill="#EC4899"
            />
          </svg>

          <div className={styles.partner}>
            <div
              className={styles.avatar}
              style={{
                backgroundImage: `url(${emailMarketingCompV2Images("empty-face-portrait.jpg")})`,
              }}
            >
              ?
            </div>
            <Typography as="p" className={styles.name}>
              {t("content.partner-name")}
            </Typography>
          </div>
        </div>
        <Typography className={styles.percent}>
          {t("content.percent")}
        </Typography>
        <Typography className={styles.compatibility}>
          {t("content.compatibility")}
        </Typography>
        <div className={styles.progress}>
          <div />
        </div>
        <div className={styles.bars}>
          {Object.values(bars).map((bar, index) => (
            <div key={`bar-${index}`} className={styles.barContainer}>
              <div className={styles.progressBarContainer}>
                <CircularProgressbar
                  className={styles.progressBar}
                  styles={{
                    path: { stroke: bar.colors.path },
                    trail: { stroke: bar.colors.trail },
                  }}
                  maxValue={100}
                  minValue={0}
                  value={Number(bar.percent)}
                  strokeWidth={8}
                />

                <Typography
                  className={styles.value}
                  style={{
                    color: bar.colors.path,
                  }}
                >
                  {bar.percent}%
                </Typography>
              </div>
              <Typography className={styles.barName}>{bar.text}</Typography>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}
