import { Box, HStack, Input, Text } from "@chakra-ui/react";
import { CiEdit } from "react-icons/ci";
import { FaRegEye } from "react-icons/fa";
import { LuSearch } from "react-icons/lu";
import DataTable from "../../../components/DataTable";
import MainFrame from "../../../components/MainFrame";
import { InputGroup } from "../../../components/ui/input-group";
import {
  PaginationItems,
  PaginationNextTrigger,
  PaginationRoot,
} from "../../../components/ui/pagination";
import { Switch } from "../../../components/ui/switch";
import { Button } from "../../../components/ui/button";
import DeleteConfirmationDialog from "./Component/DeleteConfirmationDialog";
import EditRegisterUser from "./Component/EditRegisterUser";

// Table setup
const tableHeadRow = [
  "Sr. No",
  "First Name",
  "Mobile number",
  "Gender",
  "DOB",
  "Type of User",
  "Language",
  "Activate/Deactivate",
  "Action",
];

const usersData: any[] = [
  ...Array.from({ length: 10 }, (_, i) => ({
    "Sr. No": i + 1,
    "First Name": "Ritesh",
    "Mobile number": "9876543210",
    Gender: "Male",
    DOB: "15-01-1990",
    "Type of User": "Admin",
    Language: "English",
    "Activate/Deactivate": (
      <HStack justifyContent="center">
        <Text>Yes</Text>
        <Switch size="sm" colorPalette="teal" />
        <Text>No</Text>
      </HStack>
    ),
    Action: (
      <HStack justifyContent="center" gap={2}>
        {/* <FaRegEye cursor="pointer" size="18px" /> */}
        <EditRegisterUser
          onConfirm={() => {
            console.log("User deleted:", i + 1);
          }}
        />
        <CiEdit cursor="pointer" size="18px" />
        <DeleteConfirmationDialog
          onConfirm={() => {
            console.log("User deleted:", i + 1);
          }}
        />
      </HStack>
    ),
  })),
];

const RegisterUsers = () => {
  return (
    <MainFrame>
      <HStack w={"100%"} justifyContent={"space-between"} p={3}>
        <Text as={"span"} fontSize={"sm"} fontWeight={"bolder"} color={"#000"}>
          Register User
        </Text>

        <Box w={"30%"}>
          <InputGroup
            bgSize={"xs"}
            flex="1"
            startElement={<LuSearch />}
            w={"100%"}
            color={"#000"}
          >
            <Input
              w={"100%"}
              bg={"#EEEEEE"}
              _focus={{ border: "1px #02A0A0 solid" }}
              border={"1px #EEEEEE solid"}
              rounded={"full"}
              size={"sm"}
              placeholder="Search..."
            />
          </InputGroup>
        </Box>
      </HStack>

      <DataTable tableHeadRow={tableHeadRow} data={usersData} />

      <PaginationRoot
        p={4}
        mt={8}
        count={usersData.length}
        pageSize={3}
        defaultPage={1}
      >
        <HStack justifyContent="flex-end" mb={5}>
          <PaginationItems />
          <PaginationNextTrigger />
        </HStack>
      </PaginationRoot>
    </MainFrame>
  );
};

export default RegisterUsers;
