import { Box, Button, Divider, Heading } from "@chakra-ui/react";
import { useParams } from "react-router-dom";
import { useContext, useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import GlobalStateContext from "../../../Contexts/GlobalStateContext";
import { addSponser } from "./AddSponser";
import { OPACITY_ON_LOAD } from "../../../Layout/animations";
import FormInputMain from "../../../Components/FormInputMain";

const EditSponser = () => {
  const params = useParams();
  const { sponser } = useContext(GlobalStateContext);
  const [foundObject, setFoundObject] = useState(null);
  const {
    control,
    handleSubmit,
    reset,
    getValues,
    formState: { errors },
  } = useForm({
    resolver: yupResolver(addSponser),
  });

  useEffect(() => {
    console.log(sponser);
    const id = params?.id;
    console.log(id);

    // Ensure id is compared correctly
    const found = sponser.find((item) => item?.id.toString() === id.toString());
    console.log(found?.swiftCode);
    setFoundObject(found);

    if (found) {
      reset({
        sponserName: found.sponserName,
        sponserNameArabic: found.sponserNameArabic,
        mobileNo: found.mobileNo,
        sponserAddress: found.sponserAddress,
        bankName: found.bankName,
        swiftCode: found.swiftCode,
        accountNumber: found.accountNumber,
        bankEmail: found.bankEmail,
      });
    }
  }, [params, sponser, reset]);





  if (!foundObject) {
    return <Box>Loading...</Box>; // or any loading indicator
  }


  const formFields = [
    {
      label: "Sponser name (English)",
      placeHolder:" ",
      name: "sponserName",
      type: "text",
      isRequired: true,
      section: "Add Details",
    },
    {
      label: "Sponser Name (Arabic)",
      name: "sponserNameArabic",
      placeHolder:" ",
      type: "text",
      isRequired: true,
      arabic: true,
      section: "Add Details",
    },
    {
      label: "Description (English)",
      name: "description",
      placeHolder:" ",
      type: "textarea",
      isRequired: true,
      section: "Add Details",
    },
    {
      label: "Description (Arabic)",
      name: "descriptionArabic",
      placeHolder:" ",
      type: "textarea",
      isRequired: true,
      arabic: true,
      section: "Add Details",
    },
    {
      label: "Address (English)",
      name: "sponserAddress", 
      placeHolder:" ",
      type: "text",
      isRequired: true,
      section: "Add Details",
    },
    {
      label: "Address (Arabic)",
      name: "sponserAddressArabic",
      placeHolder:" ",
      type: "text",
      isRequired: true,
      arabic: true,
      section: "Add Details",
    },
    {
      label: "Bank Name (English)",
      name: "bankName",
      placeHolder:" ",
      type: "text",
      isRequired: true,
      section: "Add Details",
    },
    {
      label: "Bank Name (Arabic)",
      name: "bankNameArabic",
      placeHolder:" ",
      type: "text",
      isRequired: true,
      arabic: true,
      section: "Add Details",
    },
    {
      label: "Account Name (English)",
      name: "accountHolderName",
      placeHolder:" ",
      type: "text",
      isRequired: true,
      section: "Add Details",
    },
    {
      label: "Account Name (Arabic)",
      name: "accountHolderNameArabic",
      placeHolder:" ",
      type: "text",
      isRequired: true,
      arabic: true,
      section: "Add Details",
    },
    {
      label: "Mobile Number (English)",
      name: "mobileNo",
      placeHolder:" ",
      type: "number",
      isRequired: true,
      section: "Add Details",
    },
    {
      label: "Account Number (English)",
      name: "accountNumber",
      placeHolder:" ",
      type: "text",
      isRequired: true,
      section: "Add Details",
    },
    {
      label: "IFSC Code (English)",
      placeHolder:" ",
      name: "swiftCode",
      type: "text",
      isRequired: true,
      section: "Add Details",
    },
  ];


 

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

  const onSubmit = (data) => {
console.log(data);
  }

  return (
    <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={14}>
    <FormInputMain
      groupedFields={groupedFields}
      control={control}
      errors={errors}

      onSubmit={handleSubmit(onSubmit)}
    />
    </Box>
  );
};

export default EditSponser;
