"use client";
import { useTranslations } from "next-intl";
import CheckoutLocationForm from "./CheckoutLocationForm";
import { useLocale } from "next-intl";
import { AuthStage } from "@/interfaces/types";
import { CancelAddOrUpdateAddresses } from "@/store/address.slice";
import { useDispatch, useSelector } from "react-redux";
import { AppDispatch, RootState } from "@/store/store";
import { TbArrowNarrowLeft } from "react-icons/tb";
import UseSession from "@/hooks/UseSession";
import DateAndTimeForm from "./DateAndTimeForm";
import AdditionalDetailsForm from "./AdditionalDetailsForm";
import PaymentForm from "./PaymentForm";

type Props = {
  setLocationId: (id: string) => void;
  locations: any;
  setAuthStage: (stage: AuthStage) => void;
  setIsOpen: (isOpen: boolean) => void;
};

export default function CheckoutDetails({
  setLocationId,
  locations,
  setAuthStage,
  setIsOpen,
}: Props) {
  const session = UseSession();
  const t = useTranslations();
  const locale = useLocale();
  const {
    phone_code,
    phone,
    description,
    is_default,
    city,
    country,
    district,
  } = useSelector((state: RootState) => state.locationConfig);
  const dispatch = useDispatch<AppDispatch>();
  return (
    <div className="space-y-6">
      {/* location Data*/}
      {locations?.length === 0 && session ? (
        <CheckoutLocationForm setLocationId={setLocationId} />
      ) : (
        <div className="border border-gray-200 rounded-2xl shadow-md shadow-black/10 p-6 flex flex-col gap-4">
          <h2 className="text-text-primary font-medium lg:text-xl text-base text-start lg:leading-[50px] leading-8 mb-4">
            {t("Text.locationDetails")}
          </h2>
          {session ? (
            <div className="bg-greynormal p-4 rounded-2xl flex flex-col gap-2">
              <div className="flex justify-between items-center">
                {is_default && +is_default == 1 ? (
                  <>{t("LABELS.delivery_location")}</>
                ) : (
                  <>{t("Text.not_default_location")}</>
                )}
                <TbArrowNarrowLeft
                  onClick={() => {
                    setIsOpen(true);
                    setAuthStage("locationData");
                    dispatch(CancelAddOrUpdateAddresses());
                  }}
                  size={40}
                  className={`cursor-pointer text-primary bg-primary-light p-2  rounded-full ${
                    locale === "en" ? "rotate-180" : ""
                  }`}
                />
              </div>
              {is_default && +is_default == 1 && (
                <div className="font-normal text-sm leading-5 text-start text-sub flex flex-col gap-2">
                  <p>
                    +{phone_code}
                    {phone}
                  </p>
                  <p>{description}</p>
                  <div className="flex flex-col gap-1">
                    <span className="text-xs text-text-secondary">
                      {country?.name}, {city?.name}, {district?.name}
                    </span>
                  </div>
                </div>
              )}
            </div>
          ) : (
            <p className="font-normal text-sm leading-5 text-start text-sub flex flex-col gap-2">
              {t("Text.noAddresses")}
            </p>
          )}
        </div>
      )}
      {/* date and time */}
      <DateAndTimeForm />

      {/* additional details */}
      <AdditionalDetailsForm />

      {/* payment form */}
      <PaymentForm />
    </div>
  );
}