import React, { useRef } from "react";
import { Input, Stack } from "@chakra-ui/react";
import { Button } from "../../../../components/ui/button";
import {
  DialogActionTrigger,
  DialogBody,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogRoot,
  DialogTitle,
  DialogTrigger,
} from "../../../../components/ui/dialog";
import { Field } from "../../../../components/ui/field";
import { FaRegEye } from "react-icons/fa";

interface EditRegisterUser {
  onConfirm: () => void;
}

const EditRegisterUser: React.FC<EditRegisterUser> = ({ onConfirm }) => {
  const ref = useRef<HTMLInputElement>(null); // Initialize the ref properly

  return (
    <div>
      <DialogRoot initialFocusEl={() => ref.current}>
        <DialogTrigger asChild>
          <FaRegEye cursor="pointer" size="18px" />
        </DialogTrigger>
        <DialogContent bgColor="#fff" color="black">
          <DialogHeader>
            <DialogTitle fontSize="md">Edit user Accounts</DialogTitle>
          </DialogHeader>
          <DialogBody pb="4">
            <Stack gap="4">
              <Field fontSize="sm" label="First Name">
                <Input
                  fontSize="sm"
                  bgColor="#EEEEEE"
                  borderRadius="50px"
                  placeholder="First Name"
                />
              </Field>
              <Field fontSize="sm" label="Gender">
                <Input
                  fontSize="sm"
                  bgColor="#EEEEEE"
                  borderRadius="50px"
                  ref={ref}
                  placeholder="Focus First"
                />
              </Field>

              <Field fontSize="sm" label="Last Name">
                <Input
                  fontSize="sm"
                  bgColor="#EEEEEE"
                  borderRadius="50px"
                  ref={ref}
                  placeholder="Focus First"
                />
              </Field>
            </Stack>
          </DialogBody>
          <DialogFooter>
            <DialogActionTrigger asChild>
              <Button variant="outline">Cancel</Button>
            </DialogActionTrigger>
            <Button onClick={onConfirm}>Save</Button>
          </DialogFooter>
        </DialogContent>
      </DialogRoot>
    </div>
  );
};

export default EditRegisterUser;
