"use client";
import { Loader2, MoveLeft } from "lucide-react";
import { useActionState, useEffect } from "react";
import { toast } from "sonner";
import { type UpdateUserFormState, updateUser } from "@/actions/user-actions";
import { Button } from "@/components/ui/button";
import { FloatingLabelInput } from "@/components/ui/floating-label";
import type { UserProfile } from "@/lib/types/user";
// import {
//   Select,
//   SelectContent,
//   SelectGroup,
//   SelectItem,
//   SelectLabel,
//   SelectTrigger,
//   SelectValue,
// } from "@/components/ui/select";

export default function UserUpdateForm({ user }: { user: UserProfile }) {
  const initialState: UpdateUserFormState = {
    message: "",
    fieldErrors: {},
    payload: new FormData(),
  };
  const [state, formAction, isPending] = useActionState(
    updateUser,
    initialState,
  );

  useEffect(() => {
    if (state.message) {
      if (state.fieldErrors) {
        Object.entries(state.fieldErrors).forEach(([field, errors]) => {
          errors.forEach((error) => {
            toast.error(`Error in ${field}: ${error}`);
          });
        });
      } else {
        toast.success("Success", {
          description: "User updated successfully",
          closeButton: true,
        });
      }
    }
  }, [state]);

  return (
    <div id="user-update-form">
      <Button
        onClick={() => window.history.back()}
        variant="outline"
        className="mb-4"
      >
        <MoveLeft />
        Go Back
      </Button>
      <form action={formAction}>
        <h4 className="p-2 rounded font-semibold text-muted-foreground">
          Update User Information
        </h4>
        <div className="border border-dashed border-sarLinkOrange p-4 rounded-lg  max-w-2xl">
          <fieldset
            disabled={isPending}
            className="space-y-1 my-2 grid grid-cols-1 md:grid-cols-2 gap-4"
          >
            <input type="hidden" name="userId" value={user.id} />
            <FloatingLabelInput
              defaultValue={
                user?.id_card || (state.payload?.get("id_card") as string)
              }
              size={10}
              name="id_card"
              label="ID Card"
            />
            <FloatingLabelInput
              defaultValue={
                user?.first_name || (state.payload?.get("first_name") as string)
              }
              name="first_name"
              label="First Name"
            />
            <FloatingLabelInput
              defaultValue={
                user?.last_name || (state.payload?.get("last_name") as string)
              }
              name="last_name"
              label="Last Name"
            />
            <FloatingLabelInput
              defaultValue={
                user?.address || (state.payload?.get("address") as string)
              }
              name="address"
              label="House Name"
            />
            {/* <Select>
              <SelectTrigger>
                <SelectValue placeholder="Select an island" />
              </SelectTrigger>
              <SelectContent>
                <SelectGroup>
                  <SelectLabel>Islands</SelectLabel>
                  <SelectItem value="apple">Apple</SelectItem>
                  <SelectItem value="banana">Banana</SelectItem>
                  <SelectItem value="blueberry">Blueberry</SelectItem>
                  <SelectItem value="grapes">Grapes</SelectItem>
                  <SelectItem value="pineapple">Pineapple</SelectItem>
                </SelectGroup>
              </SelectContent>
            </Select>
            <Select>
              <SelectTrigger>
                <SelectValue placeholder="Select an island" />
              </SelectTrigger>
              <SelectContent>
                <SelectGroup>
                  <SelectLabel>Islands</SelectLabel>
                  <SelectItem value="apple">Apple</SelectItem>
                  <SelectItem value="banana">Banana</SelectItem>
                  <SelectItem value="blueberry">Blueberry</SelectItem>
                  <SelectItem value="grapes">Grapes</SelectItem>
                  <SelectItem value="pineapple">Pineapple</SelectItem>
                </SelectGroup>
              </SelectContent>
            </Select> */}
            <FloatingLabelInput
              defaultValue={user?.dob}
              name="dob"
              type="date"
              label="DOB"
            />
            <FloatingLabelInput
              defaultValue={user?.mobile}
              name="mobile"
              label="Phone Number"
            />
          </fieldset>

          <Button
            disabled={isPending}
            type="submit"
            variant={"secondary"}
            className="col-span-2 w-full"
          >
            {isPending ? <Loader2 className="animate-spin" /> : "Update User"}
          </Button>
        </div>
      </form>
    </div>
  );
}