"use client";

import { useState } from "react";
import { useCartStore } from "@/app/store/cartStore";
import { IconButton } from "@/components/ui/icon-button";
import TranslateClient from "@/components/ui/localization/TranslateClient";
import MainButton from "@/components/ui/MainButton";
import Modal from "@/components/ui/Modal";
import { images } from "@/lib/images";
import { Product } from "@/modules/products/product";
import { useAuth } from "@/providers/AuthProvider";
import Image from "next/image";
import Login from "../login-signup/Login";
import SelectColorAndCount from "./SelectColorAndCount";

type Props = {
  product: Product;
  secondaryStyle?: boolean;
  type?: string;
  inSingleProduct?: boolean;
};
const AddToCartButton = ({
  product,
  secondaryStyle,
  type = "main",
  inSingleProduct = false,
}: Props) => {
  const { cart, postingDataState } = useCartStore();
  const [selectedColorId, setSelectedColorId] = useState<number | null>(null);
  const [selectedCountId, setSelectedCountId] = useState<number | null>(null);
  const [selectedProduct, setSelectedProduct] = useState<number | null>(null);
  const loading = selectedProduct === product?.id && postingDataState;

  const checkProductInCart = cart?.some(
    ({ product: { id } }) => product?.id === id
  );
  const [open, setOpen] = useState(false);
  const [openSelectProductDetails, setOpenSelectProductDetails] =
    useState(false);
  const user = useAuth();

  function addToCartHandler() {
    if (!user?.token) setOpen(true);
    else {
      setOpenSelectProductDetails(true);
    }
  }

  return (
    <>
      {type === "main" && (
        <MainButton
          intent={loading ? "loading" : "primary"}
          disabled={loading}
          onClick={addToCartHandler}
          className={`mb-3 ${secondaryStyle && "rounded-full"}`}
          size={"sm"}
          fullWidth={secondaryStyle ? false : true}
        >
          {!secondaryStyle ? (
            <div className="flex items-center">
              <span>
                <TranslateClient
                  text={
                    checkProductInCart
                      ? "in_cart"
                      : loading
                      ? "saving_to_cart"
                      : "add_to_cart"
                  }
                />
              </span>
              <Image
                className="w-5 h-5 rtl:mr-2 ltr:ml-2"
                src={images.bag2}
                alt="bag"
                width={30}
                height={30}
              />
            </div>
          ) : (
            <Image className="w-5 h-5" src={images.bag2} alt="bag" />
          )}
        </MainButton>
      )}

      {type === "iconButton" && (
        <IconButton
          onClick={addToCartHandler}
          disabled={loading}
          loading={loading}
          inCart={checkProductInCart}
        />
      )}
      <Modal open={open} setOpen={setOpen}>
        <Login setOpen={setOpen} />
      </Modal>
      <Modal
        open={openSelectProductDetails}
        setOpen={setOpenSelectProductDetails}
      >
        
        <SelectColorAndCount
          product={product}
          selectedColorId={selectedColorId}
          setSelectedColorId={setSelectedColorId}
          setSelectedCountId={setSelectedCountId}
          selectedCountId={selectedCountId}
          setOpen={setOpenSelectProductDetails}
        />
      </Modal>
    </>
  );
};

export default AddToCartButton;