"use client";

import React, { useState, useRef, useEffect } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Switch } from "@/components/ui/switch";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Badge } from "@/components/ui/badge";
import {
  Edit,
  Eye,
  Filter,
  Search,
  Trash,
  UserPlus,
  Upload,
  CircleDashed,
  X,
} from "lucide-react";
import {
  listAllBranches,
  createBranch,
  updateBranch,
  deleteBranch,
} from "@/app/services/api/branch-api";
import { toast } from "@/components/ui/use-toast";
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";
import { useForm } from "react-hook-form";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import {
  useCreateBranchMutation,
  useDeleteBranchMutation,
  useGetBranchQuery,
  useUpdateBranchMutation,
} from "@/redux/services/branchs.api";
import { useRouter } from "next/navigation";
import Image from "next/image";

// Type definition for Branch object
type Branch = {
  name: string;
  image?: string; // image is optional
  phone: string;
  email: string;
  address: string;
  passcode: string;
  status: string;
  code: string;
  _id?: string;
};

// Validation schema for creation (all fields required)
const FormSchema = z.object({
  name: z.string().min(2, { message: "Name must be at least 2 characters." }),
  passcode: z
    .string()
    .min(6, { message: "PIN code must be 6 characters." })
    .max(6, { message: "PIN code must be 6 characters." }),
  address: z
    .string()
    .min(5, { message: "Address must be at least 5 characters." }),
  email: z.string().email({ message: "Invalid email address." }),
  phone: z
    .string()
    .min(8, { message: "Phone number must be at least 8-15 digits." })
    .max(15, { message: "Phone number must be less than 15 digits." }),

  image: z.string().optional(),
});

// Validation schema for editing (all fields optional)
const EditFormSchema = z.object({
  name: z
    .string()
    .min(2, { message: "Name must be at least 2 characters." })
    .optional(),
  passcode: z.string().optional(),
  address: z
    .string()
    .min(5, { message: "Address must be at least 5 characters." })
    .optional(),
  email: z.string().email({ message: "Invalid email address." }).optional(),
  phone: z
    .string()
    // .min(10, { message: "Phone number must be at least 10 digits." })
    .optional(),
  image: z.string().optional(),
});

export default function BranchManagementSystem() {
  // const router = useRouter();
  // useEffect(() => {
  //   const token = localStorage.getItem("token");
  //   if (!token) {
  //     router.push("/");
  //   }
  // });
  // const [branches, setBranches] = useState<Branch[]>([]);
  const {
    data: branches,
    isLoading: isBranchesLoading,
    error: branchesError,
  } = useGetBranchQuery();
  const [Deletebranch, { isLoading: isDeleteLoading, error: DeleteError }] =
    useDeleteBranchMutation();
  const [updateBranch, { isLoading: isUpdateLoading, error: UpdateError }] =
    useUpdateBranchMutation();
  const [createBranch, { isLoading: isCreateLoading, error: CreateError }] =
    useCreateBranchMutation();

  const [searchTerm, setSearchTerm] = useState("");
  const [statusFilter, setStatusFilter] = useState<
    "all" | "active" | "inactive"
  >("all");
  const [selectedBranch, setSelectedBranch] = useState<Branch | null>(null);
  const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
  const [isViewMode, setIsViewMode] = useState(false);
  const [isEditMode, setIsEditMode] = useState(false);
  const fileInputRef = useRef<HTMLInputElement>(null);
  const [loading, setLoading] = useState<boolean>(true);

  // Use FormSchema for creation
  const form = useForm<z.infer<typeof FormSchema>>({
    resolver: zodResolver(FormSchema),
    mode: "onChange",
    defaultValues: {
      name: "",
      passcode: "",
      address: "",
      email: "",
      phone: "",
      image: "",
    },
  });

  // Use EditFormSchema for editing
  const editform = useForm<z.infer<typeof EditFormSchema>>({
    resolver: zodResolver(EditFormSchema),
    mode: "onChange",
    defaultValues: {
      name: selectedBranch?.name || "",
      passcode: "",
      address: selectedBranch?.address || "",
      email: selectedBranch?.email || "",
      phone: selectedBranch?.phone || "",
      image: selectedBranch?.image || "",
    },
  });

  useEffect(() => {
    if (isEditMode && selectedBranch) {
      editform.reset({
        name: selectedBranch.name || "",
        passcode: "",
        address: selectedBranch.address || "",
        email: selectedBranch.email || "",
        phone: selectedBranch.phone || "",
        image: selectedBranch.image || "",
      });
    }
  }, [isEditMode, selectedBranch, editform]);

  const filteredBranches =
    branches &&
    branches.filter(
      (branch) =>
        branch.name.toLowerCase().includes(searchTerm.toLowerCase()) &&
        (statusFilter === "all" || branch.status === statusFilter)
    );

  const handleToggle = (branchId: string, status: string) => {
    Deletebranch({ branchId, status })
      .unwrap()
      .then((res: any) => {
        if (res.status) {
          return toast({
            title: res.message,
            variant: "success",
          });
        }

        return toast({
          title: res.message,
          variant: "destructive",
        });
      })
      .catch((err: any) =>
        toast({
          title: "Something Went Wrong",
        })
      );
  };
  const handleCreateBranch = async (values: z.infer<typeof FormSchema>) => {
    try {
      const formData = new FormData();
      Object.entries(values).forEach(([key, value]) => {
        if (key !== "image") {
          formData.append(key, value);
        }
      });

      const file = fileInputRef.current?.files?.[0];
      if (file) {
        formData.append("image", file);
      }

      createBranch(formData)
        .unwrap()
        .then((res) => {
          if (res.status) {
            return toast({
              title: res.message,
              variant: "success",
            });
          }

          return toast({
            title: res.message,
            variant: "destructive",
          });
        })
        .catch((err) =>
          toast({
            title: "Phone number already exists",
            variant: "destructive",
          })
        );

      setIsCreateDialogOpen(false);
      form.reset();
    } catch (error) {
      form.reset();
      console.error("Error creating branch:", error);
      toast({
        title: "Something Went Wrong",
      });
    }
  };

  const handleUpdateBranch = async (values: z.infer<typeof EditFormSchema>) => {
    try {
      const formData = new FormData();

      // Append only non-empty fields to FormData
      Object.entries(values).forEach(([key, value]) => {
        if (value !== undefined && value !== null && value !== "") {
          formData.append(key, value);
        }
      });

      // Append the image file if it's been updated
      const file = fileInputRef.current?.files?.[0];
      if (file) {
        formData.append("image", file);
      }

      // Check if a branch is selected for updating
      if (selectedBranch?._id) {
        formData.append("branchId", selectedBranch._id);
        console.log(formData);
        updateBranch(formData)
          .unwrap()
          .then((res) => {
            if (res.status) {
              return toast({
                title: res.message,
                variant: "success",
              });
            }
            return toast({
              title: res.message,
              variant: "destructive",
            });
          })
          .catch((err) =>
            toast({
              title: "Something Went Wrong",
            })
          );
      }
      setIsEditMode(false);
    } catch {
      toast({
        title: "Error Editing Product",
        // description: "All Fields Are Required To Edit Product",
        variant: "destructive",
      });
    }
  };

  //     // Reset the form and close the edit dialog
  //     setIsEditMode(false);
  //     editform.reset();
  //   } catch (error) {
  //     console.error("Error updating branch:", error);
  //     toast({
  //       title: "Error",
  //       description:
  //         "An error occurred while updating the branch. Please try again.",
  //       variant: "destructive",
  //     });
  //   }
  // };

  // const handleDeleteBranch = async (id: string) => {
  //   try {

  //     await deleteBranch(id);
  //     setBranches(branches.filter((branch) => branch._id !== id));
  //     toast({
  //       title: "Branch Deleted",
  //       description: "The branch was successfully deleted.",
  //       variant: "default",
  //     });
  //   } catch (error) {
  //     console.error("Error deleting branch:", error);
  //     toast({
  //       title: "Error",
  //       description:
  //         "An error occurred while deleting the branch. Please try again.",
  //       variant: "destructive",
  //     });
  //   }
  // };

  const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];

    const allowedFileTypes = ["image/jpeg", "image/png", "image/jpg"];
    const maxSizeInMB = 5;

    if (file) {
      if (!allowedFileTypes.includes(file.type)) {
        toast({
          title: "Invalid file type",
          description: "Please upload an image file (jpg, png, jpeg).",
          variant: "destructive",
        });
        return;
      }

      if (file.size / 1024 / 1024 > maxSizeInMB) {
        toast({
          title: "File too large",
          description: `File size exceeds ${maxSizeInMB}MB. Please upload a smaller file.`,
          variant: "destructive",
        });
        return;
      }

      const reader = new FileReader();
      reader.onloadend = () => {
        if (isEditMode) {
          editform.setValue("image", reader.result as string);
        } else {
          form.setValue("image", reader.result as string);
        }
      };
      reader.readAsDataURL(file);
    }
  };

  return (
    <div className="container mx-auto p-4">
      {/* Search and Filter Section */}
      <div className="flex justify-between items-center mb-4">
        <div className="flex items-center space-x-2">
          <div className="relative">
            <Search className="absolute left-2 top-1/2 transform -translate-y-1/2 text-gray-400" />
            <Input
              type="text"
              placeholder="Search branches..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="pl-8"
            />
          </div>
          <Select
            value={statusFilter}
            onValueChange={(value: any) => setStatusFilter(value)}
          >
            <SelectTrigger className="w-[180px]">
              <Filter className="mr-2 h-4 w-4" />
              <SelectValue placeholder="Filter by status" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All Status</SelectItem>
              <SelectItem value="active">Active</SelectItem>
              <SelectItem value="inactive">Inactive</SelectItem>
            </SelectContent>
          </Select>
        </div>
        <Dialog open={isCreateDialogOpen} onOpenChange={setIsCreateDialogOpen}>
          <DialogTrigger asChild>
            <Button
              variant="appVariant"
              onClick={() => {
                form.reset();
              }}
            >
              <UserPlus className="mr-2 h-4 w-4" />
              Create Branch
            </Button>
          </DialogTrigger>
          <DialogContent className="sm:max-w-[425px]">
            <DialogHeader>
              <DialogTitle>Create Branch</DialogTitle>
              <DialogDescription>
                Enter the details for the new branch.
              </DialogDescription>
            </DialogHeader>
            <Form {...form}>
              <form
                onSubmit={form.handleSubmit(handleCreateBranch)}
                className="space-y-4"
              >
                <div className="grid grid-cols-2 gap-4">
                  <FormField
                    control={form.control}
                    name="name"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>Name</FormLabel>
                        <FormControl>
                          <Input {...field} placeholder="Branch Name" />
                        </FormControl>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                  <FormField
                    control={form.control}
                    name="passcode"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>PIN Code</FormLabel>
                        <FormControl>
                          <Input
                            {...field}
                            placeholder="PIN 6 characters long"
                            type="text"
                            maxLength={6}
                          />
                        </FormControl>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                </div>
                <FormField
                  control={form.control}
                  name="address"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>Location</FormLabel>
                      <FormControl>
                        <Input {...field} placeholder="Branch Address" />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
                <div className="grid grid-cols-2 gap-4">
                  <FormField
                    control={form.control}
                    name="email"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>Email</FormLabel>
                        <FormControl>
                          <Input {...field} type="email" placeholder="Email" />
                        </FormControl>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                  <FormField
                    control={form.control}
                    name="phone"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>Phone</FormLabel>
                        <FormControl>
                          {/* <Input
                            type="number"
                            maxLength={15}
                            {...field}
                            placeholder="Phone Number"
                          /> */}
                          <Input
                            // type="text"
                            // maxLength={15}
                            type="tel"
                            pattern="^\d{8,15}$"
                            title="Phone number must be between 8 and 15 digits and contain only numbers"
                            {...field}
                            placeholder="Phone Number"
                            required={true}
                            minLength={6}
                            maxLength={12}
                          />
                        </FormControl>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                </div>
                <div className="flex justify-between items-end">
                  <FormItem>
                    <FormLabel>Profile Picture (Optional)</FormLabel>
                    <FormControl>
                      <div className="flex items-center gap-2">
                        <Input
                          id="profilePicture"
                          type="file"
                          accept="image/*"
                          onChange={handleFileUpload}
                          className="hidden"
                          ref={fileInputRef}
                        />
                        <Button
                          type="button"
                          variant="outline"
                          onClick={() => fileInputRef.current?.click()}
                        >
                          <Upload className="mr-2 h-4 w-4" />
                          Upload
                        </Button>
                        {form.watch("image") && (
                          <div className="flex">
                            <Avatar>
                              <AvatarImage
                                src={form.watch("image")}
                                alt={form.watch("name")}
                              />
                              <AvatarFallback>
                                {form.watch("name").charAt(0)}
                              </AvatarFallback>
                            </Avatar>
                            <X
                              size={15}
                              onClick={() => {
                                form.setValue("image", ""); // Reset the image field to empty
                              }}
                              className="cursor-pointer mr-8 text-red-700" // Add a cursor pointer to make it clear it's clickable
                            />
                          </div>
                        )}
                      </div>
                    </FormControl>
                  </FormItem>
                </div>
                <DialogFooter>
                  <Button
                    variant="appVariant"
                    type="submit"
                    disabled={!form.formState.isValid}
                  >
                    Create Branch
                  </Button>
                </DialogFooter>
              </form>
            </Form>
          </DialogContent>
        </Dialog>
      </div>

      {/* Render Branches */}
      {/* {loading ? (
        <p>Loading branches...</p>
      ) : ( */}
      <Card>
        <CardHeader>
          <CardTitle>Branches</CardTitle>
          <CardDescription>Manage your organization branches</CardDescription>
        </CardHeader>
        <CardContent>
          {isUpdateLoading || isDeleteLoading ? (
            <div className="flex justify-center  h-[80vh] items-center ">
              <CircleDashed className="animate-spin text-[#be063f]" />
            </div>
          ) : (
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Branch</TableHead>
                  <TableHead>Location</TableHead>
                  <TableHead>Status</TableHead>
                  <TableHead>Actions</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {filteredBranches?.map((branch) => (
                  <TableRow key={branch._id}>
                    <TableCell className="font-medium">
                      <div className="flex items-center space-x-2">
                        {/* <AvatarImage
                            src={
                              "https://api.ibfoods.online/public/Screenshot-2024-09-20-103750-1731082577779.png"
                            }
                            alt={branch.name}
                          /> */}
                        <Avatar>
                          {branch.image && branch.image.length > 0 ? (
                            <Image
                              src={branch.image}
                              height={200}
                              width={200}
                              alt="BI"
                            />
                          ) : (
                            <AvatarFallback>
                              {branch?.name.charAt(0)}
                            </AvatarFallback>
                          )}
                        </Avatar>
                        <span>{branch.name}</span>
                      </div>
                    </TableCell>
                    <TableCell>
                      <div className="flex items-center">{branch.address}</div>
                    </TableCell>
                    <TableCell>
                      <Badge
                        variant="outline"
                        className={`capitalize ${
                          branch.status === "active"
                            ? "bg-green-100 text-green-800"
                            : "text-red-800 bg-red-100"
                        }`}
                      >
                        {branch.status}
                      </Badge>
                    </TableCell>
                    <TableCell>
                      <div className="flex space-x-2">
                        <Button
                          variant="outline"
                          size="icon"
                          onClick={() => {
                            setSelectedBranch(branch);
                            setIsViewMode(true);
                          }}
                        >
                          <Eye className="h-4 w-4" />
                        </Button>
                        <Button
                          variant="outline"
                          size="icon"
                          onClick={() => {
                            setSelectedBranch(branch);
                            setIsEditMode(true);
                          }}
                        >
                          <Edit className="h-4 w-4" />
                        </Button>
                        {/* <Button
                        variant="outline"
                        size="icon"
                        // onClick={() => handleDeleteBranch(branch._id!)}
                      > */}
                        {/* <Trash className="h-4 w-4" /> */}
                        <div className="flex items-center ">
                          <Switch
                            onClick={() => {
                              handleToggle(
                                branch._id!,
                                branch.status! === "active"
                                  ? "inactive"
                                  : "active"
                              );
                            }}
                            // className="text-[#8f0029] bg-[#8f0029]"
                            checked={branch.status === "active"}
                          />
                        </div>
                        {/* </Button> */}
                      </div>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          )}
          {isBranchesLoading && (
            <div>
              <div className="flex justify-center items-center h-[50vh]">
                <CircleDashed className="animate-spin text-[#be063f]" />
              </div>
            </div>
          )}
        </CardContent>
      </Card>

      {/* <p>
       )}
       </p> */}
      {
        <Dialog open={isViewMode} onOpenChange={setIsViewMode}>
          <DialogContent className="sm:max-w-[425px]">
            <DialogHeader>
              <DialogTitle className="text-xl font-semibold">
                {selectedBranch?.name} Details
              </DialogTitle>
            </DialogHeader>
            <div className="mt-4 space-y-6">
              <div className="flex justify-center">
                {/* <Avatar className="w-32 h-32">
                  <AvatarImage
                    src={selectedBranch?.image}
                    alt={`${selectedBranch?.name}'s avatar`}
                  />
                  <AvatarFallback>
                    {selectedBranch?.name.charAt(0)}
                  </AvatarFallback>
                </Avatar>
                 */}
                {/* <Avatar>
                  {branch.image && branch.image.length > 0 ? (
                    <Image
                      src={branch.image}
                      height={200}
                      width={200}
                      alt="BI"
                    />
                  ) : (
                    <AvatarFallback>{branch?.name.charAt(0)}</AvatarFallback>
                  )}
                </Avatar> */}
                <Avatar className="w-32 h-32">
                  {selectedBranch &&
                  selectedBranch.image &&
                  selectedBranch?.image.length > 0 ? (
                    <Image
                      src={selectedBranch.image}
                      height={200}
                      width={200}
                      alt="BI"
                    />
                  ) : (
                    <AvatarFallback>
                      {selectedBranch?.name.charAt(0)}
                    </AvatarFallback>
                  )}
                </Avatar>
              </div>
              <div className="space-y-4">
                {[
                  { label: "Name", value: selectedBranch?.name },
                  { label: "Phone", value: selectedBranch?.phone },
                  { label: "Email", value: selectedBranch?.email },
                  { label: "Address", value: selectedBranch?.address },
                  {
                    label: "Status",
                    value: selectedBranch?.status,
                    isBadge: true,
                  },
                  { label: "Code", value: selectedBranch?.code },
                ].map((item, index) => (
                  <div
                    key={index}
                    className="flex justify-between items-center"
                  >
                    <span className="font-medium text-gray-500">
                      {item.label}:
                    </span>
                    {item.isBadge ? (
                      <Badge
                        variant="outline"
                        className={`capitalize ${
                          item.value === "active"
                            ? "bg-green-100 text-green-800"
                            : "text-red-800 bg-red-100"
                        }`}
                      >
                        {item.value}
                      </Badge>
                    ) : (
                      <span className="text-gray-900 text-end ml-14">
                        {item.value}
                      </span>
                      // <span className="text-gray-900">Lorem</span>
                    )}
                  </div>
                ))}
              </div>
            </div>
          </DialogContent>
        </Dialog>
      }
      {
        <Dialog open={isEditMode} onOpenChange={setIsEditMode}>
          <DialogContent className="sm:max-w-[425px]">
            <DialogHeader>
              <DialogTitle>Edit {selectedBranch?.name}</DialogTitle>
              <DialogDescription>
                Edit the details for {selectedBranch?.name}.
              </DialogDescription>
            </DialogHeader>
            <Form {...editform}>
              <form
                onSubmit={editform.handleSubmit(handleUpdateBranch)}
                className="space-y-4"
              >
                <div className="grid grid-cols-2 gap-4">
                  <FormField
                    control={editform.control}
                    name="name"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>Name</FormLabel>
                        <FormControl>
                          <Input {...field} placeholder="Branch Name" />
                        </FormControl>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                  <FormField
                    control={editform.control}
                    name="passcode"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>PIN Code</FormLabel>
                        <FormControl>
                          <Input
                            {...field}
                            placeholder="PIN 6 characters long"
                            type="text"
                            // Clear the passcode value when editing (ensures passcode isn't pre-populated)
                            // value={isEditMode ? field.value || "" : field.value}
                            // value={isEditMode  "" : field.value}
                          />
                        </FormControl>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                </div>
                <FormField
                  control={editform.control}
                  name="address"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>Location</FormLabel>
                      <FormControl>
                        <Input {...field} placeholder="Branch Address" />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
                <div className="grid grid-cols-2 gap-4">
                  <FormField
                    control={editform.control}
                    name="email"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>Email</FormLabel>
                        <FormControl>
                          <Input {...field} type="email" placeholder="Email" />
                        </FormControl>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                  <FormField
                    control={editform.control}
                    name="phone"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>Phone</FormLabel>
                        <FormControl>
                          <Input {...field} placeholder="Phone Number" />
                        </FormControl>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                </div>
                <div className="flex justify-between items-end">
                  <FormItem>
                    <FormLabel>Profile Picture (Optional)</FormLabel>
                    <FormControl>
                      <div className="flex items-center gap-2">
                        <Input
                          id="profilePicture"
                          type="file"
                          accept="image/*"
                          onChange={handleFileUpload}
                          className="hidden"
                          ref={fileInputRef}
                        />
                        <Button
                          type="button"
                          variant="outline"
                          onClick={() => fileInputRef.current?.click()}
                        >
                          <Upload className="mr-2 h-4 w-4" />
                          Upload
                        </Button>
                        {editform.watch("image") && (
                          <Avatar>
                            <AvatarImage
                              src={editform.watch("image")}
                              alt={editform.watch("name")}
                            />
                            <AvatarFallback>
                              {editform.watch("name")?.charAt(0)}
                            </AvatarFallback>
                          </Avatar>
                        )}
                      </div>
                    </FormControl>
                  </FormItem>
                </div>
                <DialogFooter>
                  <Button variant="appVariant" type="submit">
                    Update Branch
                  </Button>
                </DialogFooter>
              </form>
            </Form>
          </DialogContent>
        </Dialog>
      }
    </div>
  );
}