import { Button } from "../../components/ui/button"
import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
import { Avatar, Box, Field, Heading, Input, Stack, Text } from "@chakra-ui/react"
import { Switch } from "../../components/ui/switch";
import { FaRegEdit } from "react-icons/fa";
import { AvatarGroup } from "../../components/ui/avatar";
function EditDetailGroups() {
    return (

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

            </DialogTrigger>

            <DialogContent
                bg={"#fff"}
                w={{ base: '90%', md: '400px' }}
                height={"auto"}
                p={3} // Reduced padding
            >
                <DialogHeader bg="white">
                    <DialogTitle alignSelf="center" color="black" fontSize="14px">Edit details</DialogTitle>
                </DialogHeader>

                <DialogBody bg="white">
                    <Stack py={3} >

                        <Field.Root>
                            <Field.Label color="black" pt={1} fontSize="12px">Group Name</Field.Label>
                            <Input value="Priyanka" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" readOnly />

                            <Field.Label color="black" pt={1} fontSize="12px">Description</Field.Label>
                            <Input value="Joshi" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" readOnly />

                            <Field.Label color="black" pt={1} fontSize="12px">Members</Field.Label>

                            <Box
                                bgColor="#EEEEEE"
                                border="none"
                                w="100%"
                                display="flex"
                                p={1}
                                rounded={4}
                            >
                                <AvatarGroup gap="0" spaceX="-3" size={"xs"} >
                                    <Avatar.Root border={'none'}>
                                        <Avatar.Fallback />
                                        <Avatar.Image src="https://cdn.myanimelist.net/r/84x124/images/characters/9/131317.webp?s=d4b03c7291407bde303bc0758047f6bd" />
                                    </Avatar.Root>

                                    <Avatar.Root border={'none'}>
                                        <Avatar.Fallback />
                                        <Avatar.Image src="https://cdn.myanimelist.net/r/84x124/images/characters/7/284129.webp?s=a8998bf668767de58b33740886ca571c" />
                                    </Avatar.Root>

                                    <Avatar.Root border={'none'}>
                                        <Avatar.Fallback />
                                        <Avatar.Image src="https://cdn.myanimelist.net/r/84x124/images/characters/9/105421.webp?s=269ff1b2bb9abe3ac1bc443d3a76e863" />
                                    </Avatar.Root>
                                    <Avatar.Root variant="solid" border={'none'} backgroundColor={'transparent'} >
                                        <Avatar.Fallback ml={5}>+3</Avatar.Fallback>
                                    </Avatar.Root>
                                </AvatarGroup>
                            </Box>
                        </Field.Root>
                        <Heading color="black" pt={1} fontSize="12px">public/Private</Heading>
                        <Switch />
                    </Stack>
                </DialogBody>
                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
                    <Button size={'xs'} w="100%" bg="#02A0A0" color={"#fff"}>
                        Save
                    </Button>
                </DialogFooter>   <DialogCloseTrigger color="black" />
            </DialogContent>
        </DialogRoot >

    )
}

export default EditDetailGroups