"use client"
import Loading from "@/app/[lang]/loading"
import LangLink from "@/components/ui/localization/LangLink"
import TranslateClient from "@/components/ui/localization/TranslateClient"
import MainButton from "@/components/ui/MainButton"
import { images } from "@/lib/images"
import { Loader } from "lucide-react"
import Image from "next/image"
import { usePathname, useRouter } from "next/navigation"
import { useEffect, useTransition } from "react"
import InfoBox from "../shared/InfoBox"
import { InvoiceSummary } from "../shared/invoice-summary/invoice-summary"
import CouponActivation from "./CouponActivation"
import { useCartStore } from "@/app/store/cartStore"

const OrderSummary = () => {
  const router = useRouter()
  const pathname = usePathname()
  const inPayment = pathname.endsWith("payment")
  const [isPending, startTransition] = useTransition()
  // const { gettingSummaryState, priceSummary, getPriceSummary, cart } = useCartStore()
  const { cart, gettingDataState, getProducts, gettingSummaryState, priceSummary, getPriceSummary } = useCartStore()

  // useEffect(() => {
  //   getPriceSummary()
  // }, [])

  const navigateToPaymentHandler = () => {
    startTransition(() => router.push("payment"))
  }

  return (
    <div className="relative">
      {gettingSummaryState ? (
        <Loading className="w-full min-h-60" />
      ) : (
        <InfoBox title="order_summary" className="text-gray-600">
          {cart.length > 0 ? (
            <>
              <CouponActivation />
              {priceSummary && <InvoiceSummary summary={priceSummary} />}
            </>
          ) : (
            <div>
              <TranslateClient text="no_orders_yet_please_continue_shopping" />
            </div>
          )}
        </InfoBox>
      )}

      {/* <LangLink href="payment"> */}
      <MainButton
        disabled={isPending}
        onClick={navigateToPaymentHandler}
        size={"sm"}
        intent={"primary"}
        fullWidth
        className={`my-5 flex items-center gap-x-2 ${!cart.length && "hidden"}`}
      >
        {isPending ? (
          <Loader className="w-5 h-5 animate-spin" />
        ) : (
          <Image src={images?.bag2} alt="bag" width={20} hidden={inPayment} />
        )}
        <TranslateClient text={inPayment ? "continue_pay" : "buy"} />
      </MainButton>
      {/* </LangLink> */}

      {/* checkout button */}
      <LangLink href="products">
        <MainButton size={"sm"} intent={"secondary"} fullWidth>
          <TranslateClient text="continue_shopping" />
        </MainButton>
      </LangLink>
    </div>
  )
}

export default OrderSummary

{
  /* <MainButton
size={"sm"}
intent={"primary"}
onClick={() => {
    if (!selectedAddress || !selectedPayment) {
        toast({
            title: locale?.["warning"],
            description: locale?.["please_select_address_and_payment_method"],
            className: "bg-red-700 text-white rounded-xl",
        })
    } else {
        console.log("selectedAddress", selectedAddress)
        console.log("selectedPayment", selectedPayment)
        console.log("continue pay")
    }
}}
fullWidth
className={`my-5 flex items-center gap-x-2 ${!cart.length && "hidden"}`}
>
<Image src={images?.bag2} alt="bag" width={20} hidden={inPayment} />
<TranslateClient text={inPayment ? "continue_pay" : "buy"} />
</MainButton> */
}