import { Box, HStack, 
  // Image, 
  Input, Text } from "@chakra-ui/react";
import MainFrame from "../../components/MainFrame";
import { InputGroup } from "../../components/ui/input-group";
import { LuSearch } from "react-icons/lu";
import DataTable from "../../components/DataTable";
// import AlertDailog from "../../components/AlertDailog";
// import { RiDeleteBin5Line } from "react-icons/ri";
import ViewManageGroup from "./ViewManageGroup";
import EditDetailGroups from "./EditDetailGroup";
import AddGroup from "./AddGroup";
// import Delete from "../../components/ActionIcons/Delete";
// import ViewSubAdmin from "./ViewSubAdmin"

// table data

const tableHeadRow = [
  "Sr. No",
  "Group Name",
  "Description",
  "Date",
  "Group type",
  "Action",
];

const managepost: any[] = [
  ...Array.from({ length: 12 }, (_, i) => ({
    "Sr. No": i + 1,
    "Group Name": "ABC",
    Description: "Lorem ipsum",
    Date: "12/01/1987",
    "Group type": "Private",
    Action: (
      <HStack justifyContent="center">
        <ViewManageGroup />
        <EditDetailGroups />
        {/* <AlertDailog
          AltertTiggerIcon={() => <Delete />} 
          alertText="Delete Users"
          alertIcon={<Image src={"DeleteIcon"} h={"39px"} />}
          alertCaption="are you sure you want to delete ?"
          onConfirm={() => {
            console.log("User deleted:", i + 1);
          }}
        /> */}
      </HStack>
    ),
  })),
];



const ManageGroups = () => {
  return (
    <MainFrame>
      <Box>
        <HStack
          w={"100%"}
          justifyContent={"space-between"}
          mb={4}
          py={0}
          px={3}
        >
          <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
            Manage Groups
          </Text>

          <HStack>
            <InputGroup
              startElement={
                <LuSearch
                  fontSize={"xs"}
                  style={{ position: "relative", left: "10px" }}
                />
              }
              color={"#000"}
            >
              <Input
                p={3}
                w={300}
                bg={"#fff"}
                colorPalette={"blue"}
                _focus={{ border: "1px solid #02A0A0" }}
                rounded={"md"}
                size={"xs"}
                fontSize={"sm"}
                placeholder="Search..."
                bgColor={"#EEEEEE"}
                ps={8}
                border={"none"}
              />
            </InputGroup>
            {/* <Button bgColor={'#EEEEEE'} pl={3} pr={3}><IoMdAdd /> <Text>Add</Text></Button> */}
            <AddGroup />
          </HStack>
        </HStack>
        <DataTable
          sortableColumns={["Name", "Registration Date "]}
          tableHeadRow={tableHeadRow}
          data={managepost}
        />
      </Box>{" "}
    </MainFrame>
  );
};
export default ManageGroups;