import { Box, Field, Input, Stack } from "@chakra-ui/react";
import {
  DialogActionTrigger,
  DialogBody,
  DialogCloseTrigger,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogRoot,
  DialogTitle,
  DialogTrigger,
} from "../../../components/ui/dialog";
import { Button } from "../../../components/ui/button";
import { IoMdAdd } from "react-icons/io";
import { useState } from "react";
// import { useCreateUserMutation } from "../../../Redux/Service/manage.user";
// import { useState } from "react";

function AddRegisterUsers() {
  // const [createUser] = useCreateUserMutation();
  const [userType, setUserType] = useState<number | "">("");

  const [user, setUser] = useState<{
    principal_type_xid: number;
    principal_source_xid: number | "";
    first_name: string;
    last_name: string;
    gender: string;
    date_of_birth: string;
    language_name: string[];
  }>({
    principal_type_xid: 1,
    principal_source_xid: userType,
    first_name: '',
    last_name: '',
    gender: '',
    date_of_birth: '',
    language_name: [],
  });

  return (
    <DialogRoot placement="center">
      <DialogTrigger asChild>
        <Button px={4} size={"xs"} bg={"#02A0A0"}>
          <IoMdAdd /> Add
        </Button>
      </DialogTrigger>

      <DialogContent
        bg={"#fff"}
        w={{ base: '90%', md: '400px' }}
        height={'80vh'}
        overflow={'scroll'}
        overflowX="hidden"
        p={3} // Reduced padding
        bgSize={'md'}
      >
        <DialogHeader bg="white" >
          <DialogTitle alignSelf="center" color="black" fontSize="14px">
            Add User Accounts
          </DialogTitle>
        </DialogHeader>

        <DialogBody bg="white">
          <Stack py={3}>
            <Field.Root>
              <Field.Label color="black" pt={1} fontSize="12px">
                First Name
              </Field.Label>
              <Input
                bgColor="#EEEEEE" 
                color="black" 
                border="none" 
                pl={1} 
                fontSize="12px" 
                height="30px"
                value={user.first_name}
                onChange={(e) => setUser({ ...user, first_name: e.target.value })}
              />

              <Field.Label color="black" pt={1} fontSize="12px">
                Last Name
              </Field.Label>
              <Input
                bgColor="#EEEEEE" 
                color="black" 
                border="none" 
                pl={1} 
                fontSize="12px" 
                height="30px"
                value={user.last_name}
                onChange={(e) => setUser({ ...user, last_name: e.target.value })}
              />

              <Field.Label color="black" pt={1} fontSize="12px">
                Gender
              </Field.Label>
              <Input
                bgColor="#EEEEEE" 
                color="black" 
                border="none" 
                pl={1} 
                fontSize="12px" 
                height="30px"
                value={user.gender}
                onChange={(e) => setUser({ ...user, gender: e.target.value })}
              />

              <Field.Label color="black" pt={1} fontSize="12px">
                DOB
              </Field.Label>
              <Input
                bgColor="#EEEEEE" 
                color="black" 
                border="none" 
                pl={1} 
                fontSize="12px" 
                height="30px" 
                type="date"
                value={user.date_of_birth}
                onChange={(e) => setUser({ ...user, date_of_birth: e.target.value })}
              />

              <Field.Root>
                <Field.Label color="black" pt={1} fontSize="12px">Select User Type</Field.Label>
                <Box bgColor="#EEEEEE" borderRadius="md" p={1}>
                  <select
                    style={{
                      width: "100%",
                      background: "transparent",
                      color: "black",
                      border: "none",
                      fontSize: "12px",
                      height: "30px",
                      outline: "none",
                    }}
                    value={userType}
                    onChange={(e) => setUserType(Number(e.target.value))}
                  >
                    <option value="">Select User Type</option>
                    <option value="2">Recruiter</option>
                    <option value="3">Jobseeker</option>
                  </select>
                </Box>
              </Field.Root>

              {/* <Field.Label color="black" pt={1} fontSize="12px">
                OTP Verified
              </Field.Label>
              <Input
               bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
              /> */}

              <Field.Label color="black" pt={1} fontSize="12px">
                Language
              </Field.Label>
              <Input
                bgColor="#EEEEEE" 
                color="black" 
                border="none" 
                pl={1} 
                fontSize="12px" 
                height="30px"
                value={user.language_name.join(", ")} // display as comma-separated string
                onChange={(e) =>
                  setUser({
                    ...user,
                    language_name: e.target.value
                      .split(",")
                      .map(lang => lang.trim())
                      .filter(Boolean), // remove empty strings
                  })
                }

              />
            </Field.Root>
          </Stack>
        </DialogBody>
        <DialogFooter mt={2}>
          <DialogActionTrigger asChild>
            <Button w="100%" bg="#02A0A0" color={"#fff"}>
              Save
            </Button>
          </DialogActionTrigger>
        </DialogFooter>
        <DialogCloseTrigger color="black" />
      </DialogContent>
    </DialogRoot>
  );
}

export default AddRegisterUsers;