tanami-admin-panel/src/Pages/Master/Sponser/AddSponser.jsx

import React, { useContext, useEffect, useState } from "react";
import { OPACITY_ON_LOAD } from "../../../Layout/animations";
import { Box } from "@chakra-ui/react";
import { useForm, Controller } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";
import { WarningTwoIcon } from "@chakra-ui/icons";
import { TiWarning } from "react-icons/ti";
import GlobalStateContext from "../../../Contexts/GlobalStateContext";
import { useNavigate, useParams } from "react-router-dom";
import { v4 as uuidv4 } from "uuid";
import FormInputMain from "../../../Components/FormInputMain";
import {
  useCreateSponserMutation,
  // useEditSponserMutation,
  useGetSponserByIdQuery,
  useUpdateSponserMutation,
} from "../../../Services/sponser.service";
import ToastBox from "../../../Components/ToastBox";
import FullscreenLoaders from "../../../Components/Loaders/FullscreenLoaders";

export const addSponser = yup.object().shape({
  sponsorName: yup.string().required("Sponser name is required"),
  sponsorNameArabic: yup.string().required("Sponser name is required"),
  mobileNo: yup
    .string()
    .required("Mobile no is required")
    .matches(/^[0-9]+$/, "Mobile no must be only digits")
    .min(10, "Mobile no must be at least 10 digits")
    .max(10, "Mobile no must be at most 15 digits"),
});

export function debounce(func, delay) {
  let debounceTimer;
  return function (...args) {
    clearTimeout(debounceTimer);
    debounceTimer = setTimeout(() => func.apply(this, args), delay);
  };
}

const AddSponser = () => {
  const params = useParams();
  const navigate = useNavigate();
  const [bannerImageData, setBannerImageData] = useState(null);
  const [selectedBannerImageData, setSelectedBannerImageData] = useState(null);

  const [otherImageData, setOtherImageData] = useState(null);
  const [selectedOtherImageData, setSelectedOtherImageData] = useState(null);

  const { sponser, setSponser } = useContext(GlobalStateContext);

  const [createSponser] = useCreateSponserMutation();

  const [updateSponser] = useUpdateSponserMutation();
  console.log(params?.id);
  const { data, error, isLoading } = useGetSponserByIdQuery(params?.id);
  console.log(data?.data);
 

  const {
    control,

    handleSubmit,
    formState: { errors },
    reset,
  } = useForm({
    resolver: yupResolver(addSponser),
  });

  console.log(errors);

  useEffect(() => {
    if (data) {
      reset({
        sponsorName: data?.data?.sponsorName,
        mobileNo: data?.data?.mobileNo,
        sponsorNameArabic: data?.data?.sponsorNameArabic,
      });
    }
  }, [data, reset]);

  if (isLoading) {
    return <FullscreenLoaders />;
  }
  
  // console.log(selectedBannerImageData);

  const formFields = [
    {
      label: "Sponser name (English)",
      placeHolder: " ",
      name: "sponsorName",
      type: "text",
      isRequired: true,
      section: "Add Details",
    },
    {
      label: "Sponser name (Arabic)",
      name: "sponsorNameArabic",
      placeHolder: " ",
      type: "text",
      isRequired: true,
      section: "Add Details",
      isArabic:true
    },
    {
      label: "Mobile Number",
      name: "mobileNo",
      placeHolder: " ",
      type: "number",
      isRequired: true,
      section: "Add Details",
    },
  ];

  const formEditFields = [
    {
      label: "Sponser name",
      placeHolder: " ",
      name: "sponsorName",
      type: "text",
      isRequired: true,
      section: "Add Details",
    },
    {
      label: "Sponser name (Arabic)",
      name: "sponsorNameArabic",
      placeHolder: " ",
      type: "text",
      isRequired: true,
      section: "Add Details",
      isArabic:true
    },
    {
      label: "Mobile Number",
      name: "mobileNo",
      placeHolder: " ",
      type: "number",
      isRequired: true,
      section: "Add Details",
    },
  ];

  const groupedEditFields = formEditFields.reduce((groups, field) => {
    const { section } = field;
    if (!groups[section]) {
      groups[section] = [];
    }
    groups[section].push(field);
    return groups;
  }, {});

  const groupedFields = formFields.reduce((groups, field) => {
    const { section } = field;
    if (!groups[section]) {
      groups[section] = [];
    }
    groups[section].push(field);
    return groups;
  }, {});

  const onSubmit = async (data) => {
    console.log(data);
    // setSponser([
    //   {
    //     ...data,
    //     status: true,
    //     id: uuidv4(),
    //     createdAt: new Date().toISOString(),
    //   },
    //   ...sponser,
    // ]);
    navigate("/sponser");
    const id = params?.id
    try {
      await createSponser(data).then((response) => {
        console.log(response);
        if (response?.data?.statusCode) {
          toast({
            render: () => <ToastBox message={response?.data?.message} />,
          });
        } else {
          toast({
            render: () => (
              <ToastBox message={"Something Went Wrong"} status={"error"} />
            ),
          });
        }
      });
    } catch (error) {
      console.log(error);
    }
  };

  return (
    <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={14}>
      <FormInputMain
        groupedFields={params?.id ? groupedEditFields : groupedFields}
        control={control}
        errors={errors}
        onSubmit={handleSubmit(onSubmit)}
      />
    </Box>
  );
};

export default AddSponser;