import type { FullyPopulatedProduct } from "@/services/models/Product";
import Image from "next/image";

import clsx from "clsx";
import styles from "./VariationReadItem.module.scss";

export default function VariationReadItem({
  variant,
}: {
  variant: FullyPopulatedProduct["variants"][number];
}) {
  const price = formatToStyle("currency", variant.price);
  const discount = variant.discount
    ? variant.discount.type === "percent"
      ? formatToStyle("percent", variant.discount.value)
      : formatToStyle("currency", variant.discount.value)
    : "-";

  function formatToStyle(type: "currency" | "percent", value: number) {
    if (type === "currency") {
      return new Intl.NumberFormat("ru-RU", {
        style: "currency",
        currency: "RUB",
        minimumFractionDigits: 0,
        maximumFractionDigits: 0,
      }).format(value);
    }

    return `${value.toString()} %`;
  }

  return (
    <tr className={styles["variation-read-item"]}>
      <td>
        <div className={styles["variation-read-item__sku-container"]}>
          <div
            className={clsx(
              styles["variation-read-item__image-wrapper"],
              styles["variation-read-item__image-wrapper--large"],
            )}
          >
            <Image
              src={variant.cover}
              alt=""
              fill
              className={styles["variation-read-item__image"]}
            />
          </div>
          <span>{variant.sku}</span>
        </div>
      </td>
      <td>
        <div className={styles["variation-read-item__image-wrapper"]}>
          <Image
            src={variant.colorId.image.url}
            alt={variant.colorId.name}
            fill
            className={styles["variation-read-item__image"]}
          />
        </div>
      </td>
      <td>{price}</td>
      <td>{discount}</td>
      <td>{variant.inventory?.reserved ?? "—"}</td>
      <td>{variant.inventory?.stock ?? "—"}</td>
      <td>
        <input
          type="checkbox"
          name="quick-ship"
          id="quick-ship"
          checked={variant.inventory?.quickShip}
          disabled
        />
      </td>
    </tr>
  );
}