tanami-admin-panel/src/Pages/IO_Management/KeyMeritsEdit.jsx

import {
  Box,
  Button,
  Drawer,
  DrawerBody,
  DrawerCloseButton,
  DrawerContent,
  DrawerFooter,
  DrawerHeader,
  DrawerOverlay,
  FormControl,
  FormErrorMessage,
  FormLabel,
  HStack,
  Image,
  Input,
  Menu,
  MenuButton,
  MenuItem,
  MenuList,
  Stack,
  Text,
  Textarea,
  useToast,
} from "@chakra-ui/react";
import React, { useEffect, useRef, useState } from "react";
import { useForm, Controller } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import CustomAlertDialog from "../../Components/CustomAlertDialog";
import * as yup from "yup";
import ToastBox from "../../Components/ToastBox";
import { useUpdateKeyMeritsMutation } from "../../Services/io.service";
import { ChevronDownIcon } from "@chakra-ui/icons";

const keyMeritsSchema = yup.object().shape({
  meritsHeader: yup.string().required("Title is required"),
  meritsDescription: yup.string().required("Sub title is required"),
  meritsHeaderArabic: yup.string().required("Arabic title is required"),
  meritsDescriptionArabic: yup
    .string()
    .required("Arabic Description is required"),
    icon_xid: yup.mixed().required("Icon is required"), // Adjust based on file or string
});

const KeyMeritsEdit = ({ isOpen, onClose, firstField, id, actionId, data, icons }) => {
  const toast = useToast();
  const [alert, setAlert] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
  const [editKeyMerits] = useUpdateKeyMeritsMutation();
  const [selectedIcon, setSelectedIcon] = useState("Select Icon");
  const [selectedImageIcon, setSelectedImageIcon] = useState(null);

  const found = data?.find((item) => item?.id === actionId);

  const {
    control,
    reset,setValue,
    handleSubmit,
    formState: { errors },
  } = useForm({
    resolver: yupResolver(keyMeritsSchema),
  });
  // useEffect to reset the form when `found` changes
  useEffect(() => {
    if (found) {
      reset({
        meritsHeader: found?.meritsHeader,
        meritsDescription: found?.meritsDescription,
        meritsHeaderArabic:found?.meritsHeaderArabic,
        meritsDescriptionArabic:found?.meritsDescriptionArabic,
        iconImage: null,
      });
    }
  }, [found, reset]);

  const onSubmit = async (data) => {
    setIsLoading(true);
    try {
      const id = actionId;
      const res = await editKeyMerits({ data, id });
      if (res?.data?.statusCode === 201) {
        toast({
          render: () => <ToastBox message={res?.data?.message} />,
        });
        setAlert(false);
        onClose();
        setIsLoading(false);
        reset();
        return;
      }
      if (res?.error?.data?.code === 400) {
        toast({
          render: () => (
            <ToastBox message={res?.error?.data?.message} status={"error"} />
          ),
        });
        setAlert(false);
        onClose();
        setIsLoading(false);
        reset();
        return;
      }
    } catch (error) {
      if (error) {
        console.log(error);
        toast({
          render: () => (
            <ToastBox
              message={"Something went wrong, please try again!"}
              status={"error"}
            />
          ),
        });
      }
      setIsLoading(false);
      setAlert(false);
      onClose();
      reset();
    }
    reset();
  };

  const handleSave = () => {
    handleSubmit(onSubmit)();
  };

  console.log(errors);


  const handleIconSelect = (id, iconName, iconFilePath) => {
    setValue("icon_xid", id);
    setSelectedIcon(iconName); // Update selected icon name
    setSelectedImageIcon(iconFilePath);
  };




  return (
    <>
      <Drawer
      size={"xl"}
        isOpen={isOpen}
        placement="right"
        initialFocusRef={firstField}
        onClose={onClose}
      >
        <DrawerOverlay />
        <DrawerContent>
          <DrawerCloseButton />
          <DrawerHeader fontSize={"sm"}>Edit Key Merits</DrawerHeader>

          <DrawerBody>
            <HStack spacing={2} w={'100%'} flexWrap={'wrap'} >
              <FormControl mb={2} w={"49%"} isInvalid={!!errors.meritsHeader} isRequired={true}>
                <FormLabel fontSize={"sm"}>Title (English)</FormLabel>
                <Controller
                  name="meritsHeader"
                  control={control}
                  render={({ field }) => (
                    <Input {...field} fontSize={"sm"} type="text" size={"sm"} />
                  )}
                />
                <FormErrorMessage fontSize={"xs"} fontWeight={500}>
                  {errors.meritsHeader?.message}
                </FormErrorMessage>
              </FormControl>




              <FormControl mb={2} w={"49%"} 
                isInvalid={!!errors.meritsHeaderArabic}
                isRequired={true}
              >
                <FormLabel fontSize={"sm"}>Title (Arabic)</FormLabel>
                <Controller
                  name="meritsHeaderArabic"
                  control={control}
                  render={({ field }) => (
                    <Input
                    textAlign={'right'}
                      {...field}
                      fontSize={"sm"}
                      type="textarea"
                      size={"sm"}
                    />
                  )}
                />
                <FormErrorMessage fontSize={"xs"} fontWeight={500}>
                  {errors.meritsHeaderArabic?.message}
                </FormErrorMessage>
              </FormControl>





              <FormControl mb={2} w={"49%"} 
                isInvalid={!!errors.meritsDescription}
                isRequired={true}
              >
                <FormLabel fontSize={"sm"}>Description (English)</FormLabel>
                <Controller
                  name="meritsDescription"
                  control={control}
                  render={({ field }) => (
                    <Textarea
                      {...field}
                      fontSize={"sm"}
                      type="textarea"
                      size={"sm"}
                      rows={2}
                    />
                  )}
                />
                <FormErrorMessage fontSize={"xs"} fontWeight={500}>
                  {errors.meritsDescription?.message}
                </FormErrorMessage>
              </FormControl>

              
              <FormControl mb={2} w={"49%"} 
                isInvalid={!!errors.meritsDescriptionArabic}
                isRequired={true}
              >
                <FormLabel fontSize={"sm"}>Description (Arabic)</FormLabel>
                <Controller
                  name="meritsDescriptionArabic"
                  control={control}
                  render={({ field }) => (
                    <Textarea
                    rows={2}
                    textAlign={'right'}
                      {...field}
                      fontSize={"sm"}
                      type="textarea"
                      size={"sm"}
                    />
                  )}
                />
                <FormErrorMessage fontSize={"xs"} fontWeight={500}>
                  {errors.meritsDescriptionArabic?.message}
                </FormErrorMessage>
              </FormControl>







































              <FormControl w={"49%"}  isInvalid={!!errors.icon_xid} isRequired={true}>
                <FormLabel fontSize={"sm"}>Select Icon</FormLabel>
                <Controller
                  name="icon_xid"
                  control={control}
                  render={({ field }) => (
                    <Menu>
                      <MenuButton
                      h={34}
                      className="border"
                        bg="transparent"
                        size={"sm"}
                        fontWeight={500}
                        rounded={"sm"}
                        w={"100%"}
                        textAlign={"left"}
                        as={Button}
                        rightIcon={<ChevronDownIcon />}
                        border={!errors.icon_xid?.message || !selectedImageIcon && "2px solid #e53e3e"}
                      >
                        <Box display="flex" alignItems="center">
                          <Image
                            src={`https://admin.tanami.betadelivery.com/${selectedImageIcon}`}
                            alt={selectedImageIcon}
                            boxSize="1rem"
                            mr="12px"
                          />{" "}
                          <Text as={"span"} fontSize={"sm"} fontWeight={500}>
                            {selectedIcon}
                          </Text>
                        </Box>
                      </MenuButton>
                      <MenuList minW='415px' size={"sm"} fontWeight={500}>
                        {icons?.map(({ iconName, id, iconFilePath }) => (
                          <MenuItem
                            key={id}
                            onClick={() =>
                              handleIconSelect(id, iconName, iconFilePath)
                            }
                          >
                            <Box display="flex" alignItems="center">
                              <Image
                                src={`https://admin.tanami.betadelivery.com/${iconFilePath}`}
                                alt={iconName}
                                boxSize="1rem"
                                mr="12px"
                              />
                              <Text
                                as={"span"}
                                fontSize={"sm"}
                                fontWeight={500}
                              >
                                {iconName}
                              </Text>
                            </Box>
                          </MenuItem>
                        ))}
                      </MenuList>
                    </Menu>
                  )}
                />
                <FormErrorMessage fontSize={"xs"} fontWeight={500}>
                  {!errors.icon_xid?.message || !selectedImageIcon &&  errors.icon_xid?.message}
                  {errors.icon_xid?.message && errors.icon_xid?.message}
                </FormErrorMessage>
              </FormControl>









            </HStack>
          </DrawerBody>


          <DrawerFooter>
            <Button
              variant="outline"
              colorScheme={"green"}
              rounded={"sm"}
              size={"sm"}
              mr={3}
              onClick={onClose}
            >
              Cancel
            </Button>

            <Button
              colorScheme={"green"}
              rounded={"sm"}
              size={"sm"}
              onClick={() => setAlert(true)}
            >
              Save
            </Button>
          </DrawerFooter>
        </DrawerContent>
      </Drawer>
      <CustomAlertDialog
        isOpen={alert}
        onClose={() => setAlert(false)}
        alertHandler={handleSave}
        message={"Are you sure you want to add this key merit?"}
        isLoading={isLoading}
      />
    </>
  );
};

export default KeyMeritsEdit;