"use client";
import { useLocale } from "next-intl";
import { Dialog, DialogContent, DialogFooter, DialogTitle } from "../ui/dialog";
import LocationForm from "@/components/appforms/LocationForm";
import CheckoutAddresses from "@/components/checkout/CheckoutAddresses";
import { AuthStage } from "@/interfaces/types";
import ChangeEmailForm from "@/components/appforms/ChangeEmailForm";
import VerifyEmailForm from "@/components/appforms/VerifyEmailForm";

const AppDialog = ({
  isDialogOpen,
  setIsDialogOpen,
  authStage,
  setAuthStage,
  setLocationId,
  width,
}: {
  isDialogOpen: boolean;
  setIsDialogOpen: (open: boolean) => void;
  authStage: AuthStage;
  setAuthStage: (stage: AuthStage) => void;
  setLocationId?: (id: any) => void;
  width?: string;
}) => {
  const locale = useLocale();

  return (
    <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
      <DialogTitle></DialogTitle>
      <DialogContent
        dir={locale === "ar" ? "rtl" : "ltr"}
        className={`w-[95%] ${
          width ? `xl-${width}` : "xl:w-[500px]"
        } max-w-[95%] xl:max-w-[65%] bg-white border border-secondarydark `}
      >
        {authStage === "locationData" && (
          <CheckoutAddresses
            setAuthStage={setAuthStage}
            dialogOpen={setIsDialogOpen}
          />
        )}
        {authStage === "location" && (
          <LocationForm
            setAuthStage={setAuthStage}
            dialogOpen={setIsDialogOpen}
            setLocationId={setLocationId}
          />
        )}{" "}
        {authStage === "verify_email" && (
          <VerifyEmailForm
            setAuthStage={setAuthStage}
            dialogOpen={setIsDialogOpen}
          />
        )}{" "}
        {authStage === "change_phone" && (
          <ChangeEmailForm
            setAuthStage={setAuthStage}
            dialogOpen={setIsDialogOpen}
          />
        )}
      </DialogContent>
      <DialogFooter></DialogFooter>
    </Dialog>
  );
};

export default AppDialog;