import { Button } from "./ui/button"
import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "./ui/dialog"
import { Field, Grid, Heading, Input, Stack, Text } from "@chakra-ui/react"
import { Checkbox } from "./ui/checkbox"
import { FaRegEdit } from "react-icons/fa";
function EditSubAdmin() {
    return (

        <DialogRoot placement="center">
            <DialogTrigger asChild>
                <Button bg={"transparent"} size="sm">
                    <FaRegEdit style={{ cursor: "pointer", }} />
                </Button>
                {/* <Button><FaRegEdit /></Button> */}

            </DialogTrigger>

            <DialogContent
                bg={"#fff"}
                // w={{ lg: "60%", md: "230px" }}
                w={{ base: '90%', md: '400px' }}

                height={'80vh'}
                overflow={'scroll'}
                p={2} // Reduced padding
                bgSize={'md'}
            >
                <DialogHeader bg="white" pt={1} pb={2}>
                    <DialogTitle alignSelf="center" color="black" fontSize="14px">Edit Sub Admin Account</DialogTitle>
                </DialogHeader>

                <DialogBody bg="white">
                    <Stack p={2} >

                        <Field.Root>
                            <Field.Label color="black" pt={1} fontSize="12px">First Name</Field.Label>
                            <Input placeholder="Enter the First Name" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
                            <Field.Label color="black" pt={1} fontSize="12px">First Name</Field.Label>
                            <Input placeholder="Enter the First Name" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
                            <Field.Label color="black" pt={1} fontSize="12px">Last Name</Field.Label>
                            <Input placeholder="Enter the Last Name" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />

                            <Field.Label color="black" pt={1} fontSize="12px">DOB</Field.Label>
                            <Input placeholder="Enter the DOB" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />

                            <Field.Label color="black" pt={1} fontSize="12px">Gender</Field.Label>
                            <Input placeholder="Enter the Gender" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
                            <Heading mt={5} color={'#000'} fontSize={'sm'}>Permissions</Heading>

                        </Field.Root>
                        <Grid templateColumns="repeat(2, 1fr)" gap={4}>
                            <Checkbox size={'sm'} color={"black"} ><Text fontSize={12}>Dashboard</Text></Checkbox>
                            <Checkbox size={'sm'} color={"black"} ><Text fontSize={12}>Manage contact us</Text></Checkbox>
                            <Checkbox size={'sm'} color={"black"} ><Text fontSize={12}>manage User</Text></Checkbox>
                            <Checkbox size={'sm'} color={"black"} ><Text fontSize={12}>Manage CMS</Text></Checkbox>
                            <Checkbox size={'sm'} color={"black"} ><Text fontSize={12}>Manage Post</Text></Checkbox>
                            <Checkbox size={'sm'} color={"black"} ><Text fontSize={12}>Manage Reports</Text></Checkbox>
                            <Checkbox size={'sm'} color={"black"} ><Text fontSize={12}>manage Sub-Admin</Text></Checkbox>
                            <Checkbox size={'sm'} color={"black"} ><Text fontSize={12}>My profile</Text></Checkbox>
                            <Checkbox size={'sm'} color={"black"} ><Text fontSize={12}>Manage Jobs</Text> </Checkbox>
                            <Checkbox size={'sm'} color={"black"} ><Text fontSize={12}> manage feedbacks</Text></Checkbox>
                            <Checkbox size={'sm'} color={"black"} ><Text fontSize={12}>Manage community</Text> </Checkbox>
                            <Checkbox size={'sm'} color={"black"} ><Text fontSize={12}> Notification</Text></Checkbox>
                        </Grid>
                    </Stack>
                </DialogBody>
                <DialogFooter display="flex" justifyContent="center">
                    <Button w="100%" bg="#02A0A0" color={"#fff"}>
                        Save
                    </Button>
                </DialogFooter>

                <DialogCloseTrigger color="black" />
            </DialogContent>
        </DialogRoot >

    )
}

export default EditSubAdmin