"use client";

import useCurrentLanguage from "@/hooks/useCurrentLanguage";
import { CartProduct } from "@/modules/products/product";
import Image from "next/image";
import SingleProductCounter from "../products/SingleProductCounter";
import { useCartStore } from "@/app/store/cartStore";
import { Trash2Icon } from "lucide-react";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import Link from "next/link";
import { images } from "@/lib/images";
import Price from "../shared/price/price";
import { cn } from "@/lib/utils";
import TranslateClient from "@/components/ui/localization/TranslateClient";

type Props = {
  product: CartProduct;
  deleteProduct?: any;
  getProducts?: any;
  deletingDataState?: any;
  getPriceSummary?: any;
};

const CartCard = ({ product, deletingDataState }: Props) => {
  const { getProducts, getPriceSummary, deleteProduct } = useCartStore();
  const { lang } = useCurrentLanguage();

  console.log("color id for delete ", product);

  return (
    <Card className="rounded-[16px]">
      <CardContent className="p-0">
        <div className="flex flex-col md:flex-row">
          <div className="relative md:w-1/3 lg:w-1/4 overflow-hidden rounded-tr-[16px] rounded-tl-[16px] md:rounded-tl-none md:rounded-tr-0 md:rtl:rounded-tr-[16px] md:rtl:rounded-br-[16px] md:ltr:rounded-tl-[16px] md:ltr:rounded-bl-[16px]">
            <Image
              alt={product?.product?.name[lang]}
              className="h-[200px] w-full object-cover md:h-full"
              height="200"
              src={product?.product?.images?.[0]?.original_url}
              style={{
                aspectRatio: "200/200",
                objectFit: "cover",
              }}
              width="200"
            />
          </div>
          <div className="flex flex-1 flex-col p-6">
            <div className="mb-4 flex items-start justify-between">
              <div>
                <h3 className="text-xl font-semibold">
                  {product?.product?.name[lang]}
                </h3>
                <p className="mt-1 text-sm text-muted-foreground">
                  {product?.product?.description[lang]}
                </p>
                <div className="mt-3 flex items-center space-x-2">
                  <div
                    className="h-6 w-6 rounded-full border border-gray-300"
                    style={{ background: product?.color?.color_degree }}
                    aria-hidden="true"
                  />
                </div>
              </div>
              <Button
                variant="ghost"
                size="icon"
                onClick={() =>
                  deleteProduct(product?.product?.id, product?.color?.id).then(
                    (data) => {
                      if (data?.response?.message === "Success!") {
                        getProducts();
                        getPriceSummary();
                      }
                    }
                  )
                }
              >
                <Trash2Icon
                  className={cn("h-5 w-5 text-red-700", {
                    "animate-pulse": deletingDataState,
                  })}
                />
                <span className="sr-only">Delete item</span>
              </Button>
            </div>
            <div className="mt-auto flex flex-wrap items-end justify-between gap-4">
              <div className="space-y-1">
                <div className="text-xl font-semibold text-primary">
                  {product?.product?.priceAfterDiscount.toFixed(2)} <TranslateClient text="sr" />
                </div>
                <div className="text-sm text-slate-500 line-through">
                  {product?.product?.price.toFixed(2)} <TranslateClient text="sr" />
                </div>
              </div>
              <div className="flex items-center space-x-4">
                <SingleProductCounter product={product} />
              </div>
            </div>
          </div>
        </div>
      </CardContent>
    </Card>
  );
};

export default CartCard;