import { Field, HStack, Image, Input, Stack } from "@chakra-ui/react"
// import { TbEdit } from "react-icons/tb"
// import img from "../../assets/waterfall.jpg"
import { DialogBody, DialogCloseTrigger, DialogContent, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
// import Edit from "../../components/ActionIcons/Edit"
import { LuEye } from "react-icons/lu"

const APIURL = import.meta.env.VITE_POST_IMG

function ViewDailog({ localData }: { localData: any, refetch: VoidFunction }) {
    return (
        <DialogRoot placement="center">
            <DialogTrigger asChild>
                {/* <Span><Edit /></Span> */}
                <LuEye fontSize={"xm"} cursor={'pointer'} />
            </DialogTrigger>

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

                <DialogBody bg="white">
                    <Stack py={3} >
                        <Field.Root>
                            <Field.Label color="black" pt={1} fontSize="12px">Description</Field.Label>
                            <Input
                                // placeholder="Enter the Title"
                                value={localData.translation.content}
                                bgColor="#EEEEEE"
                                color="black"
                                border="none"
                                pl={1}
                                fontSize="12px"
                                height="30px"
                                readOnly
                            />

                            {/* <Field.Label color="black" pt={1} fontSize="12px">Subtitle</Field.Label>
                            <Input placeholder="Enter the Subtitle" 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 placeholder="Enter the Description" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" readOnly /> */}
                            <Field.Label color="black" pt={1} fontSize="12px">Image</Field.Label>
                            <HStack w="fit-content" flexWrap={'wrap'}>
                                {localData.images.map((img: any) => (
                                    img.type === 'image' ? (
                                        <Image
                                            key={img.id}
                                            src={`${APIURL}${img.image_name}`}
                                            w="30%"
                                            maxH="150px"
                                            objectFit="contain"
                                        />
                                    ) : (
                                        <video
                                            key={img.id}
                                            width="45%"
                                            height="50"
                                            controls
                                        >
                                            <source src={`${APIURL}${img.image_name}`} type="video/mp4" />
                                        </video>
                                    )
                                ))}
                            </HStack>

                            {/* <Image src={img} w="100%" maxH="150px" objectFit="contain" /> */}
                        </Field.Root>
                    </Stack>
                </DialogBody>

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

    )
}

export default ViewDailog