import React, { useContext, useEffect, useState } from "react";
import FormInputMain from "../../../Components/FormInputMain";
import { useNavigate, useParams } from "react-router-dom";
import { yupResolver } from "@hookform/resolvers/yup";
import { useForm } from "react-hook-form";
import * as yup from "yup";
import GlobalStateContext from "../../../Contexts/GlobalStateContext";
import FullscreenLoaders from "../../../Components/Loaders/FullscreenLoaders";
import {
  useCreateIOMutation,
  useGetIOByIdQuery,
  useUpdateIOMutation,
} from "../../../Services/io.service";
import ToastBox from "../../../Components/ToastBox";
import {
  useToast,
} from "@chakra-ui/react";
import { formatDatee } from "../../../Components/FormField";
import { formatDateToYYYYMMDD, removeTrailingZeros } from "../../../Constants/Constants";

const schema = yup.object().shape({
  investmentNameEnglish: yup
    .string()
    .required("IO name in English is required")
    .min(3, "IO name in English must be at least 3 characters long")
    .max(150, "IO name in English must be at most 150 characters long"),

  investmentNameArabic: yup 
    .string()
    .required("IO name in Arabic is required")
    .min(3, "IO name in Arabic must be at least 3 characters long")
    .max(50, "IO name in Arabic must be at most 50 characters long"),

  descriptionEnglish: yup
    .string()
    .required("Description in English is required")
    .min(10, "Description in English must be at least 10 characters long")
    .max(1000, "Description in English must be at most 1000 characters long"),

  descriptionArabic: yup
    .string()
    .required("Description in Arabic is required")
    .min(10, "Description in Arabic must be at least 10 characters long")
    .max(2000, "Description in Arabic must be at most 500 characters long"),
    expectedReturnArabic: yup
      .string()
      .required("Expected return in Arabic is required"),

      goalAmount: yup
      .number()
      .typeError("Goal Amount is must be number")
      .required('Goal amount is required')
      .positive('Goal amount must be a positive number'),
  closingDate: yup
    .date()
    .notRequired("Closing date is required")
    .min(new Date(), "Closing date cannot be in the past"),

  holdingPeriod: yup.string().required("Holding period is required"),
  holdingPeriodArabic: yup.string().required("Holding period is required"),

  // minInvestmentAmount: yup
  //   .number()
  //   .required("Minimum investment is required")
  //   .positive("Minimum investment must be a positive number")
  //   .min(1, "Minimum investment must be at least 1"),

  ISIN: yup.string().notRequired(),

  InvestmentDetails: yup.string().notRequired(),

  comment: yup.string().notRequired()
  // .min(10, "Comment must be at least 10 characters long")
  .max(100, "Comment must be at most 100 characters long"),

  expectedReturn: yup
    .string()
    .required("Expected return is required"),
});

const IODetails = ({ enableNextTab, index, data }) => {

  const params = useParams();
  const navigate = useNavigate();
  const toast = useToast();


  const handleInputChangeCreate = (index, newValue) => {
    
    const updatedValues = [...values];
    updatedValues[index].value = newValue;
    setValues(updatedValues);
    console.log(values); 
  };

  const handleInputChangeEdit = (index, newValue) => {
    // Allow only whole numbers using regex
    if (/^\d*$/.test(newValue)) {
      const updatedValues = [...values];
      updatedValues[index].value = newValue;
      setValues(updatedValues);
      console.log(values);
    }
  };

  // ======================[ States ]
  const [isLoading, setIsLoading] = useState();

  // ======================[ Variables Api ]
  const id = params?.id;

  // ======================[ Cotext Api ]
  const { investmentType, sponser, setIOStatus, setIODetails, setIOloading } =
    useContext(GlobalStateContext);

  // ======================[ RTK Querry Api ]

  const {
    data: IObyID,
    isLoading: IObyIDisLoading,
    error: IObyIDerror,
  } = useGetIOByIdQuery(id, { skip: !id });
  console.log(IObyID);

  const [creatIO] = useCreateIOMutation();
  const [updateIO] = useUpdateIOMutation();

  // ======================[ Selector filter ]
  const investmentTypeOptions = data?.investmentType.map(
    ({ investmentTypeName, id }) => {
      return {
        label: investmentTypeName,
        value: Number(id),
      };
    }
  );

  const sponserNameOption = data?.sponsor?.map(({ sponsorName, id }) => {
    return {
      label: sponsorName,
      value: Number(id),
    };
  });

  const miniValue = data?.country?.map(
    ({ countryName, flagIcon, minInvestmentAmt, countryCode, id, currency }, index) => {
      return {
        id:id,
        country: countryName,
        value: minInvestmentAmt,
        logo: flagIcon,
        curr: currency?.currencyCode,
      };
    }
  );

  const minInvestmentById = IObyID?.data?.minInvestmentAmt?.map(({minInvestmentAmt, country, currencyCode,  country_xid,id })=>{
    console.log(currencyCode);
    return{
      _id:id,
      id:country_xid,
      country: country?.countryName,
      value: removeTrailingZeros(minInvestmentAmt),
      logo: country?.flagIcon,
      curr: currencyCode,
    }
  })


  const schemaEdit = yup.object().shape({
    investmentNameEnglish: yup
      .string()
      .required("IO name in English is required")
      .min(3, "IO name in English must be at least 3 characters long")
      .max(150, "IO name in English must be at most 150 characters long"),
  
    investmentNameArabic: yup
      .string()
      .required("IO name in Arabic is required")
      .min(3, "IO name in Arabic must be at least 3 characters long")
      .max(50, "IO name in Arabic must be at most 50 characters long"),
  
    descriptionEnglish: yup
      .string()
      .required("Description in English is required")
      .min(10, "Description in English must be at least 10 characters long")
      .max(1000, "Description in English must be at most 1000 characters long"),
  
    descriptionArabic: yup
      .string()
      .required("Description in Arabic is required")
      .min(10, "Description in Arabic must be at least 10 characters long")
      .max(2000, "Description in Arabic must be at most 500 characters long"),
      expectedReturnArabic: yup
        .string()
        .required("Expected return in Arabic is required"),
  
        goalAmount: yup
        .number()
        .typeError("Goal Amount is must be number")
        .required('Goal amount is required')
        .positive('Goal amount must be a positive number')
        .min(IObyID?.data?.totalAmtInvestmentInUSD, `Goal amount should not be lesser then amount raised ${IObyID?.data?.totalAmtInvestmentInUSD}`),
    closingDate: yup
      .date()
      .notRequired("Closing date is required")
      .min(new Date(), "Closing date cannot be in the past"),
  
    holdingPeriod: yup.string().required("Holding period is required"),
    holdingPeriodArabic: yup.string().required("Holding period is required"),
    isShariah: yup.string().required("CheckBox is required"),

  
    // minInvestmentAmount: yup
    //   .number()
    //   .required("Minimum investment is required")
    //   .positive("Minimum investment must be a positive number")
    //   .min(1, "Minimum investment must be at least 1"),
  
    ISIN: yup.string().notRequired(),
  
    InvestmentDetails: yup.string().notRequired(),
  
    comment: yup.string().notRequired()
    .min(10, "Comment must be at least 10 characters long")
    .max(100, "Comment must be at most 100 characters long"),
  
    expectedReturn: yup
      .string()
      .required("Expected return is required"),
  });
  
  

  
  const [values, setValues] = useState(id?minInvestmentById:miniValue);

  console.log(values);
  
  const formatNumber = (num) => {
    // Remove non-numeric characters and format with commas
    return num.replace(/\D/g, '')
              .replace(/\B(?=(\d{3})+(?!\d))/g, ',');
  };
  // console.log(values);

  // ======================[ Validator filter ]
  const {
    control,
    reset,
    watch,
    setValue,
    handleSubmit,
    formState: { errors },
  } = useForm({
    resolver: yupResolver(id ? schemaEdit : schema),
  });

  useEffect(() => {
    setIOloading(IObyIDisLoading)
    setIODetails({
      ...IObyID?.data,
    });
    if (IObyID?.data) {
      reset({
        investmentNameEnglish: IObyID?.data?.investmentNameEnglish,
        investmentNameArabic: IObyID?.data?.investmentNameArabic,
        descriptionEnglish: IObyID?.data?.descriptionEnglish,
        descriptionArabic: IObyID?.data?.descriptionArabic,
        goalAmount: IObyID?.data?.goalAmount,
        closingDate: formatDatee(IObyID?.data?.closingDate),
        holdingPeriod: IObyID?.data?.holdingPeriod,
        ISIN: IObyID?.data?.ISIN,
        comment: IObyID?.data?.comment,
        expectedReturn: IObyID?.data?.expectedReturn,
        investmentType_xid: IObyID?.data?.investmentType_xid,
        InvestmentDetails: IObyID?.data?.InvestmentDetails,
        minInvestmentAmount: IObyID?.data?.minInvestmentAmount,
        holdingPeriodArabic: IObyID?.data?.minInvestmentAmount,
        expectedReturnArabic: IObyID?.data?.minInvestmentAmount,
        isShariah: IObyID?.data?.isShariah
      });
    }

  }, [id, IObyID]);

  //=======================[ Creator ]
  const formFields = [
    {
      label: "IO Name",
      name: "investmentNameEnglish",
      value: IObyID?.data?.investmentNameEnglish,
      type: "text",
      isRequired: true,
      section: " ",
      width: "49%",
      maxLength:150,
      helperText:`Maximum length should be 150 characters. You have entered ${watch()?.investmentNameEnglish?.length || 0} characters.`
    },
    {
      label: "IO Name (Arabic)",
      name: "investmentNameArabic",
      value: IObyID?.data?.investmentNameArabic,
      type: "text",
      isRequired: true,
      arabic: true,
      section: " ",
      width: "49%",
      maxLength:150,
      helperText:`Maximum length should be 150 characters. You have entered ${watch()?.investmentNameArabic?.length || 0} characters.`
    },
    {
      label: "Description",
      name: "descriptionEnglish",
      value: IObyID?.data?.descriptionEnglish,
      type: "textarea",
      isRequired: true,
      section: " ",
      width: "49%",
      maxLength:1000,
      helperText:`Maximum length should be 1000 characters. You have entered ${watch()?.descriptionEnglish?.length || 0} characters.`
    },
    {
      label: "Description (Arabic)",
      name: "descriptionArabic",
      value: IObyID?.data?.descriptionArabic,
      type: "textarea",
      isRequired: true,
      arabic: true,
      section: " ",
      width: "49%",
      maxLength:1000,
      helperText:`Maximum length should be 1000 characters. You have entered ${watch()?.descriptionArabic?.length || 0} characters.`
      
    },
    {
      label: "Holding Period",
      name: "holdingPeriod",
      type: "text",
      placeHolder: "1Y",
      isRequired: true,
      section: " ",
      width: "49%",
      value: IObyID?.data?.holdingPeriod,
      maxLength:20,
      helperText:`Maximum length should be 20 characters. You have entered ${watch()?.holdingPeriod?.length || 0} characters.`
    },
    {
      label: "Holding Period (Arabic)",
      name: "holdingPeriodArabic",
      type: "text",
      placeHolder: "1Y",
      isRequired: true,
      arabic: true,
      section: " ",
      width: "49%",
      value: IObyID?.data?.holdingPeriodArabic,
      maxLength:20,
      helperText:`Maximum length should be 20 characters. You have entered ${watch()?.holdingPeriodArabic?.length || 0} characters.`
    },


    {
      label: "Expected Return",
      name: "expectedReturn",
      type: "text",
      isRequired: true,
      section: " ",
      width: "32.3%",
      value: IObyID?.data?.expectedReturn,
    },

    {
      label: "Expected Return (Arabic)",
      name: "expectedReturnArabic", 
      type: "text",
      isRequired: true,
      arabic: true,
      section: " ",
      width: "32.3%",
      value: IObyID?.data?.expectedReturnArabic,
    },
    {
      label: "Shariah",
      name: "isShariah", 
      type: "checkBox",
      value:IObyID?.data?.isShariah,
      // isRequired: true,
      section: " ",
      width: "32.3%",
      value: IObyID?.data?.isShariah,
    },


    {
      label: "Investment Type",
      placeHolder: "Select option",
      name: "investmentType",
      type: "select",
      isRequired: true,
      section: " ",
      width: "32.3%",
      options: investmentTypeOptions,
      value: IObyID?.data?.investmentType_xid,
    },
    {
      label: "Sponsor Name",
      placeHolder: "Select option",
      name: "sponserName",
      type: "select",
      isRequired: true,
      options: sponserNameOption,
      section: " ",
      width: "32.3%",
      value: IObyID?.data?.sponsor_xid,
    },
    {
      label: "Goal Amount",
      placeHolder: "$00.00",
      value: IObyID?.data?.goalAmount,
      name: "goalAmount",
      type: "number",
      isRequired: true,
      section: " ",
      width: "32.3%",
    },
    {
      label: "Closing Date",
      name: "closingDate",
      // value: "IObyID?.data?.closingDate",
      type: "date",
      isRequired: true,
      section: " ",
      width: "32.3%",
      dateValue:formatDatee(IObyID?.data?.closingDate),
      // helperText: IObyID && `Current closing date is : ${formatDate(IObyID?.data?.closingDate)}`
      closingDate:true
    },
    {
      label: "ISIN",
      placeHolder: "",
      name: "ISIN",
      type: "text",
      align:"right",
      section: " ",
      width: "32.3%",
    },
    {
      label: "Investment Details",
      placeHolder: "",
      name: "InvestmentDetails",
      type: "text",
      section: " ",
      width: "32.3%",
      value: IObyID?.data?.InvestmentDetails,
      maxLength:20,
      helperText:`Maximum length should be 20 characters. You have entered ${watch()?.InvestmentDetails?.length || 0} characters.`
    },

    {
      label: "Minimum Investment",
      placeHolder: "Enter comment here",
      name: "table",
      type: "table",
      section: " ",
      width: "100%", 
      isRequired: true,
      options: investmentTypeOptions,
      handleInputChange:id ?  handleInputChangeEdit : handleInputChangeCreate,
      value: values,
    },

    {
      label: "Comment",
      placeHolder: "Enter comment here",
      name: "comment",
      type: "textarea",
      section: " ",
      width: "100%",
      options: investmentTypeOptions,
      value: IObyID?.data?.comment,
      maxLength:100,
      helperText:`Maximum length should be 100 characters. You have entered ${watch()?.comment?.length || 0} characters.`
    },
  ];
  const groupedFields = formFields.reduce((groups, field) => {
    const { section } = field;
    if (!groups[section]) {
      groups[section] = [];
    }
    groups[section].push(field);
    return groups;
  }, {});

  const onSubmit = async (data) => {

    delete data.table;

    setIsLoading(true);
    const updatedMinAmount = values?.map(({id, value, _id})=>{
      return {
        id:_id,
        country_xid:id,
        minInvestmentAmt: Number(value)
      }
    })

    // console.log(formatDateToYYYYMMDD(data.closingDate));
    const formData = {
      ...data,
      investmentType_xid: Number(data.investmentType),
      sponsor_xid: Number(data.sponserName),
    minInvestmentAmt:updatedMinAmount,
    closingDate: formatDateToYYYYMMDD(data.closingDate)
    };

    // console.log(formData);
    if (id) {
      console.log("========================",formData);
      const res = await updateIO({ data: formData, id });
      console.log(res);
      if (res?.data?.statusCode === 200) {
        setIsLoading(false);
        toast({
          render: () => <ToastBox message={res?.data?.message} />,
        });
        navigate(`/view-io/${id}`);
        enableNextTab(index);
      } else if(res?.error?.status === 400){
        setIsLoading(false);
        toast({
          render: () => <ToastBox message={res?.error?.data?.message } status={"error"} />,
        }); 
      } else if(res?.error?.status === 500){
        setIsLoading(false);
        toast({
          render: () => <ToastBox message={res?.error?.data?.message } status={"error"} />,
        });
      }
    } else {
      try {
        console.log("========================",formData);
        const res = await creatIO(formData);
        console.log(res?.error?.status);
        if (res?.data?.statusCode === 200) {
          setIsLoading(false);
          toast({
            render: () => <ToastBox message={res?.data?.message} />,
          });
          navigate(`/view-io/${res?.data?.data}`);
          enableNextTab(index);
        } else if(res?.error?.status === 400){
          setIsLoading(false);
          toast({
            render: () => <ToastBox message={res?.error?.data?.message } status={"error"} />,
          });
        }else if(res?.error?.status === 500){
          setIsLoading(false);
          toast({
            render: () => <ToastBox message={res?.error?.data?.message } status={"error"} />,
          });
        }
      } catch (error) {
        setIsLoading(false);
        console.log(error);
      }
    }


    // ==========================
    // if (params?.id) {
    //   return enableNextTab(index);
    // }
    // const id = generateUniqueId();
    // const status = "Draft";
    // // setValue("id", id)
    // const updatedData = { ...data, id, ioStatus: status };

    // // Add the updated data to the IODetails array
    // setIODetails([...IODetails, updatedData]);

    // // Navigate to the new route
    // navigate(`/create-io/${updatedData?.id}`);
  };

  return IObyIDisLoading ? (
    <FullscreenLoaders height={'70vh'} />
  ) : (
    
    <FormInputMain
      p={0.1}
      w={250}
      width={"23.8%"}
      groupedFields={groupedFields}
      control={control}
      errors={errors}
      onSubmit={handleSubmit(onSubmit)}
      btnLoading={isLoading}
      submitTitle={id ? "Update" : "Submit"}
    >
      {/* <Box display={"flex"} justifyContent={"end"} mb={3} mt={4} me={3}>
        <Checkbox colorScheme='forestGreen' display={"flex"} gap={3} flexDirection= {"row-reverse"}>
         <Text as={"span"} fontWeight={500} fontSize={"sm"}>Shariah</Text>
        </Checkbox>
      </Box> */}
    </FormInputMain>
  );
};

export default IODetails;