import React from "react";
import ProductDefaultImage from "../../../assets/icons/photo.svg";
import GiftImage from "../../../assets/icons/presents.svg";
import IconArrowDown from "../../../components/Icon/IconArrowDown";
import { useAppStore } from "../../../store/appStore";
import { formatNumber } from "../../../utils";

type CartProductBookedProps = {
  item: {
    id: number;
    quantity: number;
    item_price: number;
    is_bonus: boolean;
    before_discount_price: number;
    bonus_product_name: string;
    product: {
      id: number;
      name: string;
      price: number;
      check_inventory: boolean;
      quantity_in_stock_with_distribute: number;
      images: {
        image_url: any;
      }[];
      distributes: {
        element_distributes: {
          name: string;
          quantity_in_stock: number;
          sub_element_distributes: {
            quantity_in_stock: number;
            name: string;
          }[];
        }[];
      }[];
      product_discount: {
        discount_price: number;
        value: number;
      };
    };
    distributes_selected: {
      name: string;
      value: string;
      sub_element_distributes: string | null;
    }[];
  };
  endItem: boolean;
  getAddressDefault: Function;
};

const CartProductBooked = ({
  item,
  endItem,
  getAddressDefault,
}: CartProductBookedProps) => {
  const {
    product,
    item_price,
    is_bonus,
    before_discount_price,
    distributes_selected,
    bonus_product_name,
  } = item;
  let {
    price,
    product_discount,
    distributes,
    quantity_in_stock_with_distribute,
    check_inventory,
  } = product;

  const { appTheme } = useAppStore((state) => state);
  let pastPrice = price;

  if (product_discount) price = product_discount.discount_price;

  const image_url = product?.images[0]?.image_url
    ? product?.images[0]?.image_url
    : ProductDefaultImage;
  return is_bonus ? (
    <div
      className={`flex gap-[20px] py-[10px] px-[20px] ${
        endItem ? "" : "border-b-[1px] border-[#e4e4e4]"
      } pl-[20px]`}
    >
      <div className="w-[50px] h-[50px] flex-shrink-0">
        <img
          className="w-full h-full object-cover"
          src={image_url}
          alt={product.name}
        />
      </div>
      <div className="flex w-full justify-between gap-x-2">
        <div className="flex justify-center flex-col">
          <div className="line-clamp-2">{product.name}</div>
          {distributes_selected?.length > 0 && (
            <div className="text-[10px] text-gray-500">
              Phân loại: {distributes_selected[0].value}{" "}
              {distributes_selected[0].sub_element_distributes}
            </div>
          )}
        </div>
        <div className="flex items-center gap-x-2 flex-shrink-0">
          <div className="text-red-500">x {item.quantity}</div>
          <div className="flex flex-col items-center gap-y-1">
            <div>
              <img src={GiftImage} alt="gift" className="w-5 h-5" />
            </div>
            <div className="text-[10px] line-clamp-2 w-12 text-center leading-3">
              {bonus_product_name}
            </div>
          </div>
        </div>
      </div>
    </div>
  ) : (
    <div
      className={`flex gap-x-[20px] py-[10px] px-[20px] ${
        endItem ? "" : "border-b-[1px] border-[#e4e4e4]"
      }`}
    >
      <div className="w-[70px] h-[70px] flex-shrink-0">
        <img
          className="w-full h-full rounded-[4px] mt-0 object-cover"
          src={image_url}
          alt={product.name}
        />
      </div>
      <div className="flex flex-col flex-1">
        <p className="line-clamp-2">{product.name}</p>
        {distributes_selected?.length > 0 && (
          <div className="text-[10px] text-gray-500">
            <div className="inline-flex items-center gap-x-1 ">
              <span>
                Phân loại: {distributes_selected[0].value}{" "}
                {distributes_selected[0].sub_element_distributes}
              </span>
              <IconArrowDown className={"w-2 h-2"} />
            </div>
          </div>
        )}
        <div className="flex justify-between">
          <div className="flex items-center gap-x-3">
            <div
              className="font-semibold"
              style={{
                color: appTheme.color_main_1,
              }}
            >
              {item_price > 0 ? `đ${formatNumber(item_price)}` : "Liên hệ"}
            </div>
            {pastPrice !== price && before_discount_price > 0 && (
              <div className="line-through text-xs text-slate-400">
                đ{formatNumber(before_discount_price)}
              </div>
            )}
          </div>
          <div className="text-sm">x{item.quantity}</div>
        </div>
      </div>
    </div>
  );
};
export default CartProductBooked;