SSA-Admin-Panel/src/Pages/MasterModule/TemplateMaster/EditTemplateModel.tsx

import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../../components/ui/dialog"
import { Box, Field, IconButton, Input, Stack, Text, Textarea } from "@chakra-ui/react"
import { Button } from "../../../components/ui/button"
import { FiUpload } from "react-icons/fi";
import { useState } from "react";
import { FaRegEdit } from "react-icons/fa";


function EditTemplateModel() {

    const [images, setImages] = useState<string[]>([]);

    const handleImageChange = (event: React.ChangeEvent<HTMLInputElement>) => {
      if (event.target.files) {
        const selectedFiles = Array.from(event.target.files);
  
        const newImages = selectedFiles.map((file) => {
          return URL.createObjectURL(file); // Convert to preview URL
        });
  
        setImages((prevImages) => [...prevImages, ...newImages]); // Append new images
      }
    };

   
    return (

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

            </DialogTrigger>

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

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

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

                            
                            <Field.Label color="black" pt={1} fontSize="12px">Images</Field.Label>
                            <Box display="flex" alignItems="center" justifyContent="space-between" px={3} bgColor="#EEEEEE" border="none" width="100%"  height="50px" cursor="pointer"  position="relative">
                            <Input type="file" accept="image/*" opacity={0} position="absolute" bgColor="#EEEEEE" border="none" pl={1} width="100%" height="100%"  cursor="pointer" onChange={handleImageChange}/>
                            <Box display="flex" gap={2} overflow="hidden">
                                {images.length > 0 ? (
                                images.map((img, index) => (
                                    <img
                                    key={index}
                                    src={img}
                                    alt={`Uploaded ${index}`}
                                    style={{ maxHeight: "40px", maxWidth: "70px", objectFit: "contain" }}
                                    />
                                ))
                                ) : (
                                <Box width="70px" height="40px" /> // Placeholder to maintain layout
                                )}
                            </Box>
                              <FiUpload color="#000" />
                            </Box>
                           
                            {/* <Input placeholder="" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" /> */}

                        </Field.Root>
                    </Stack>

                </DialogBody>
                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
                    <Button w="100%" bg="#02A0A0" color={"#fff"}>
                        Save
                    </Button>
                </DialogFooter>

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

    )
}

export default EditTemplateModel