import React, { useEffect, useState, useRef } from "react";
import { useForm, Controller } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import { object, string } from "yup";
import Image from "next/image";
import ToggleBar from "./ToggleBar";
import { dotVerify, McVerify ,McFmcVerify} from "../../../services/public";
import { FormLabel, FormControl, Button } from "react-bootstrap";
import BusinessAddressUser from "./BusinessAddressUser";
import RegionBox from "./RegionBox";
import { useSession } from "next-auth/react";
import ContactNames from "../form/ContactNames";
import SubscriptionDetails from "../form/SubscriptionDetails";
import { GetGeneralInfoUpdate } from "../../../services/profile";
import { getGeneralInformation } from "../../../services/customers";
import BillingInfoDetails from "../form/BillingInfoDetails";
import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import AssociateUserTable from "./AssociateUserTable";
import { useRouter } from "next/router";
import { mapboxAddressActionUrl } from "@/helpers/projectHelper";

interface FormData {
  business_company: string;
  business_phone: string;
  business_fax: string;
  business_address: string;
  business_web_site: string;
  scac_code: string;
  country: string;
  business_city: string;
  business_state_code: string;
  business_zip: string;
}

function UserDetails(): JSX.Element {
  const [formattedPhone, setFormattedPhone] = useState("");
  const [formattedfax, setFormattedfax] = useState("");
  const [disabled, setDisabled] = useState(true);
  const [dotMc, setDotMc] = useState("DOT");
  const [selectedOriginDestination, setSelectedOriginDestination] =
    useState("");
  const [refresh, setRefresh] = useState(false);
  const [faxErrorVisible, setFaxErrorVisible] = useState(false);
  const [phoneErrorVisible, setPhoneErrorVisible] = useState(false);
  const { data } = useSession();
  const token = data?.user?.image;
  const [propData, setPropData] = useState();
  const [dotNumberLoading, setDotNumberLoading] = useState(false);
  const [MCNumberLoading, setMCNumberLoading] = useState(false);
  const [searchedSuggestions, setSearchSuggestions] = useState([]);
const [DetailingCondition,setDetailingCondition] = useState()
  const [Load, setLoad] = useState(false)
  const [dotNumber, setDotNumber] = useState();
  const [mcNumber, setMCNumber] = useState();
  const router = useRouter();
  const toastShownRef = useRef(false);



  async function getAddressSuggestions(event: any) {

    await SuggestionScope12(event, setSearchSuggestions);
  }
  function bindSelectedAddress(item: SelectAddressType) {
    
    setValue("business_address", item.name);
    setSearchSuggestions([]);
    setSelectedOriginDestination(item.name);
    setValue("business_state_code", item?.state)
    setValue("business_city", item?.city)
    setValue("business_zip", item?.post_code)
  }


  let schema = object().shape({
    business_company: string()
      .required("Company name is required")
      .min(2, "Company name must be at least 2 characters")
      .max(100, "Company name cannot exceed 100 characters"),
    business_address: string()
      .required("Company address is required"),
    country: string(),
    is_active: string()
      .required("Please select status"),
    business_state_code: propData?.data?.user_type === "carrier" && propData?.data?.is_claimed === 0
      ? string()
      : string().required("Billing state is required"),
    business_city: propData?.data?.user_type === "carrier" && propData?.data?.is_claimed === 0
      ? string()
      : string().required("City is required"),
  
  });


  schema = moduleScope(dotMc, router, schema);

  const userId = router?.query?.id;
  const VerifyDot = async (userDetails: any) => {
    await dotScope1(userDetails, setDotNumber);
  };
  const Verifymc = async (userDetails: any) => {
    await verifyMcScope(userDetails, setMCNumber);
  };
  function prefillData(userDetails: any, response: any) {
    PrefillScope(
      { userDetails, response, VerifyDot, Verifymc, setDotMc, setDotErr, setMcErr, setValue, setFormattedfax, setFormattedPhone, setSelectedOriginDestination });
  }


  const fetchCarrierDetails = (token1: any) => {
    return detilsFetchScope(
      token1,
      userId,
      prefillData,
      setPropData,
      setRefresh,
      setLoad,
      setDetailingCondition
    );
  };

  useEffect(() => {
    useEffectModCon(data, toastShownRef, router, token, refresh, fetchCarrierDetails);
  }, [refresh, Load]);
  const {
    handleSubmit,
    control,
    setValue,
    register,
    clearErrors,
    formState: { errors },
  } = useForm<FormData>({
    resolver: yupResolver(schema),
  });

  const handleCustomerUpdate = async (
    accesstoken: any,
    id1: any,
    payload: any
  ) => {
    await handleCustomerUpdateScope(
      { accesstoken, id1, payload, setDisabled, setValue, setMcErr, setDotErr, fetchCarrierDetails, token,phoneErrorVisible });
  };
  const isValidUrl = (url: string) => {
    return RegexScope(url);
  };
  const onSubmit = async (payload: FormData) => {

    if (dotErr || mcErr) {
      return;
    }
    if (payload.business_web_site && !isValidUrl(payload.business_web_site)) {
      toast.error("Company website format is incorrect", {
        position: toast.POSITION.TOP_CENTER,
      });
      return;
    }
    payload.user_id = userId;
    await handleCustomerUpdate(token, userId, payload);
  };
  const isDotChecked = dotMc === "DOT";

  const { handlePhoneChange, handleFaxChange } = Handler(
    setPhoneErrorVisible,
    setValue,
    setFormattedPhone,
    setFaxErrorVisible,
    setFormattedfax
  );
  const [dotErr, setDotErr] = useState();
  const [mcErr, setMcErr] = useState();
  const [fmcsaMc, setFmcsaMc] = useState();

  const handleVerified = async (event: { target: { value: any } }) => {
    await VerifiedScope2(
      { event, setDotNumberLoading, setMcErr, setValue, clearErrors, setDotNumber, setDotErr, setFmcsaMc, fmcsaMc, setMCNumber }    );
  };

  const handleVerifiedMc = async (event: { target: { value: any } }) => {
    await mcVerified2(
      { event, setMCNumberLoading, setDotErr, setValue, clearErrors, setMCNumber, setMcErr, setDotNumber }    );
  };
  const inputClassName = `form-select ${errors.leagal_name ? "is-invalid" : ""}`;

  const checkDot = () => {
    if (dotNumber === true) {
      return (
        <div className='mc-dot'>
          <Image width={20} height={20} src={"/images/tick.jpeg"} alt={""} />
        </div>
      );
    }
  };
  const [collapsed,setCollapsed] = useState(false)
  const [Togglecollapsed, setToggleCollapsed] = useState(false)
  const checkDotMC = checkDotMCModScope(mcNumber);
  const renderNumberInput = inputRender(
    { dotMc, control, disabled, register, handleVerified, dotNumberLoading, checkDot, errors, dotErr, handleVerifiedMc, MCNumberLoading, checkDotMC, mcErr });

  return jsxContent(
    { router, disabled, setDisabled, setDotErr, setMcErr, setPhoneErrorVisible, setFaxErrorVisible, setRefresh, handleSubmit, onSubmit, control, errors, handlePhoneChange, formattedPhone, phoneErrorVisible, handleFaxChange, formattedfax, faxErrorVisible, isDotChecked, setMCNumber, setValue, setDotMc, dotMc, setDotNumber, renderNumberInput, inputClassName, propData, refresh, token, Load, setLoad, getAddressSuggestions, searchedSuggestions, bindSelectedAddress, setSelectedOriginDestination, selectedOriginDestination, DetailingCondition, collapsed, setCollapsed, Togglecollapsed, setToggleCollapsed });
}

export default UserDetails;
function useEffectModCon(data, toastShownRef: React.MutableRefObject<boolean>, router, token, refresh: boolean, fetchCarrierDetails: (token1: any) => Promise<any>) {
  if (data?.user?.group_type !== "super_admin") {
    if (!toastShownRef.current) {
      toastShownRef.current = true;
      toast.error("Access Denied", {
        position: toast.POSITION.TOP_CENTER,
      });
    }
    router.push("/dashboard");
  } else {
    useEffectScope(token, refresh, fetchCarrierDetails);

  }
}

function checkDotMCModScope(mcNumber: undefined) {  
  return () => {
    if (mcNumber === true) {
      return (
        <div className='mc-dot'>
          <Image width={20} height={20} src={"/images/tick.jpeg"} alt={""} />
        </div>
      );
    }
  };
}

async function mcVerified2(
{ event, setMCNumberLoading, setDotErr, setValue, clearErrors, setMCNumber, setMcErr, setDotNumber }: { event: { target: { value: any; }; }; setMCNumberLoading: React.Dispatch<React.SetStateAction<boolean>>; setDotErr: React.Dispatch<React.SetStateAction<undefined>>; setValue; clearErrors; setMCNumber: React.Dispatch<React.SetStateAction<undefined>>; setMcErr: React.Dispatch<React.SetStateAction<undefined>>; setDotNumber: any; }) {
  const mcNumber = event?.target?.value;
  if (mcNumber?.length ) {
    setMCNumberLoading(true);
    let res;
    try {
      res = await McVerify(mcNumber);
    } catch (error) {
      handleVerificationErrors(setMcErr, setMCNumberLoading, setMCNumber);
      return;
    }
    const Dotdata = (res && res.content && res.content[0]?.carrier) || {};
    clearPreviousValues(setDotErr, setValue, clearErrors);

    if (res?.content) {
      setVerificationValuess(Dotdata, setValue,setDotNumber);
      
      setMCNumber(true);
      setMcErr("");
      setMCNumberLoading(true);
    } 
    if( res?.status_code == 500 ||
      res?.content === null ||
      res?.content === undefined) {
        
      handleVerificationErrors(setMcErr, setMCNumberLoading, setMCNumber);
    }

    setMCNumberLoading(false);
    if (mcNumber.length === 0) {
      setMCNumber(false);
      setMcErr("");
    }
  }
}

function handleVerificationErrors(
  setMcErr: React.Dispatch<React.SetStateAction<undefined>>,
  setMCNumberLoading: React.Dispatch<React.SetStateAction<boolean>>,
  setMCNumber: React.Dispatch<React.SetStateAction<undefined>>
) {
  setMCNumber(false);
  setMcErr("MC Number is not verified");
  setMCNumberLoading(false);
}

function clearPreviousValues(
  setDotErr: React.Dispatch<React.SetStateAction<undefined>>,
  setValue,
  clearErrors
) {
  setDotErr("");
  clearErrors("");
}

function setVerificationValuess(Dotdata, setValue,setDotNumber) {
  
  if(!Dotdata?.dotNumber){
    setDotNumber(false);
  }
  setValue("leagal_name", Dotdata?.legalName);
  setValue("sw_dba_name", Dotdata?.dbaName ? Dotdata?.dbaName : "N/A");
  setValue("dot_number",Dotdata?.dotNumber);
  setValue(
    "sw_drivers_total",
    Dotdata?.totalDrivers ? Dotdata?.totalDrivers : "N/A"
  );
  setValue(
    "sw_power_units_total",
    Dotdata?.totalPowerUnits ? Dotdata?.totalPowerUnits : "N/A"
  );
  setValue(
    "entity_type",
    Dotdata?.brokerAuthorityStatus === "A" &&
      Dotdata?.totalPowerUnits === null
      ? "BROKER"
      : "CARRIER"
  );
}


function RegexScope(url: string) {
  const urlRegex = /^(ftp|http|https):\/\/[^ "]+$/;
  return urlRegex.test(url);
}

async function VerifiedScope2(
{ event, setDotNumberLoading, setMcErr, setValue, clearErrors, setDotNumber, setDotErr, setFmcsaMc, fmcsaMc, setMCNumber }: { event: { target: { value: any; }; }; setDotNumberLoading: React.Dispatch<React.SetStateAction<boolean>>; setMcErr: React.Dispatch<React.SetStateAction<undefined>>; setValue; clearErrors: any; setDotNumber: React.Dispatch<React.SetStateAction<undefined>>; setDotErr: React.Dispatch<React.SetStateAction<undefined>>; setFmcsaMc: React.Dispatch<React.SetStateAction<undefined>>; fmcsaMc: React.Dispatch<React.SetStateAction<undefined>>; setMCNumber: any; }) {
  const dotNumber = event?.target?.value;

  if (dotNumber?.length ) {
    setDotNumberLoading(true);

    let res;
    let res1;
    try {
      res = await dotVerify(dotNumber);
      res1 = await McFmcVerify(event.target.value);
    } catch (error) {
      handleVerificationError(setDotErr, setDotNumberLoading, setDotNumber, setValue);
      return;
    }

    
  contentMod(res1, setMCNumber);
  if(res1?.content?.length){
    setMCNumber(true)
  }

    if (res?.content) {
      const Dotdata = res?.content?.carrier;
      setVerificationValues(Dotdata, setValue);
      clearErrors("");
      setMcErr("");
      setDotErr("")
      setValue("mc_number",res1?.content[0]?.docketNumber)
      setFmcsaMc(res1?.content[0]?.docketNumber);
      setDotNumber(true);
    }  
     if ( res?.status_code == 500 ||
      res?.content === null ||
      res?.content === undefined) {
     
      handleVerificationError(setDotErr, setDotNumberLoading, setDotNumber, setValue);
    }

    setDotNumberLoading(false);
    if (event?.target?.value?.length === 0) {
      setDotNumber(false);
    }
    if (dotNumber.length === 0) {
      setDotNumber(false);
    }
  }
}

function contentMod(res1: any, setMCNumber: any) {
  if (res1?.content?.length === 0) {
    setMCNumber(false);

  }
}

function handleVerificationError(
  setDotErr: React.Dispatch<React.SetStateAction<undefined>>,
  setDotNumberLoading: React.Dispatch<React.SetStateAction<boolean>>,
  setDotNumber: React.Dispatch<React.SetStateAction<undefined>>,
  setValue
) {
  setDotNumber(false);
  setDotErr("DOT Number is not verified");
  resetValues(setValue);
  setDotNumberLoading(false);
}

function setVerificationValues(Dotdata, setValue) {
  setValue("leagal_name", Dotdata?.legalName ? Dotdata?.legalName : "N/A");
  setValue("sw_dba_name", Dotdata?.dbaName ? Dotdata?.dbaName : "N/A");
  setValue("sw_drivers_total", Dotdata?.totalDrivers ? Dotdata?.totalDrivers : "N/A");
  setValue("sw_power_units_total", Dotdata?.totalPowerUnits ? Dotdata?.totalPowerUnits : "N/A");
  setValue("entity_type", Dotdata?.brokerAuthorityStatus === "A" && Dotdata?.totalPowerUnits === null ? "BROKER" : "CARRIER");
}

function resetValues(setValue) {
  setValue("leagal_name", "");
  setValue("sw_dba_name", "");
  setValue("sw_drivers_total", "");
  setValue("sw_power_units_total", "");
  setValue("entity_type", "");
}

function Handler(
  setPhoneErrorVisible: React.Dispatch<React.SetStateAction<boolean>>,
  setValue,
  setFormattedPhone: React.Dispatch<React.SetStateAction<string>>,
  setFaxErrorVisible: React.Dispatch<React.SetStateAction<boolean>>,
  setFormattedfax: React.Dispatch<React.SetStateAction<string>>
) {
  const handlePhoneChange = (event: { target: { value: any } }) => {
    let inputValue = event.target.value;
    setPhoneErrorVisible(false);
    const cleanedInput = inputValue?.replace(/\D/g, "");
    const formattedNumber = cleanedInput?.slice(0, 11);
    if (formattedNumber?.length < 10) {
      setPhoneErrorVisible(true);
    } else {
      setPhoneErrorVisible(false);
    }
    const formattedDisplayNumber = formattedNumber?.replace(
      /(\d{3})(\d{3})(\d{4})/,
      "$1-$2-$3"
    );
    if (formattedDisplayNumber?.length === 0) {
      setPhoneErrorVisible(false);
    }
    setValue("business_phone", formattedDisplayNumber);
    setFormattedPhone(formattedDisplayNumber);
  };
  const handleFaxChange = (event: { target: { value: any } }) => {
    let inputValuefax = event.target.value;

    const cleanedInputfax = inputValuefax?.replace(/\D/g, "");
    const formattedNumberfax = cleanedInputfax?.slice(0, 10);

    if (formattedNumberfax?.length < 10) {
      setFaxErrorVisible(true);
    } else {
      setFaxErrorVisible(false);
    }
    const formattedDisplayNumberfax = formattedNumberfax?.replace(
      /(\d{3})(\d{3})(\d{4})/,
      "$1-$2-$3"
    );
    if (formattedNumberfax?.length === 0) {
      setFaxErrorVisible(false);
    }
    setValue("business_fax", formattedDisplayNumberfax);
    setFormattedfax(formattedDisplayNumberfax);
  };
  return { handlePhoneChange, handleFaxChange };
}

async function handleCustomerUpdateScope(
  { accesstoken, id1, payload, setDisabled, setValue, setMcErr, setDotErr, fetchCarrierDetails, token,phoneErrorVisible }: { accesstoken: any; id1: any; payload: any; setDisabled: React.Dispatch<React.SetStateAction<boolean>>; setValue; setMcErr: React.Dispatch<React.SetStateAction<undefined>>; setDotErr: React.Dispatch<React.SetStateAction<undefined>>; fetchCarrierDetails: (token1: any) => Promise<any>; token: string | null | undefined; phoneErrorVisible:any }): Promise<void> {
 if(phoneErrorVisible === true){
  return
 }
    const response = await GetGeneralInfoUpdate(accesstoken, id1, payload);
  if (response?.status === "success") {
    setDisabled(true);
    toast.success(response.message, {
      position: toast.POSITION.TOP_CENTER,
    });

    setValue("entity_type", "");
    setMcErr("");
    setDotErr("");
    fetchCarrierDetails(token);
  } else {
    toast.error(response.message, {
      position: toast.POSITION.TOP_CENTER,
    });
  }
}

function useEffectScope(
  token: string | null | undefined,
  refresh: boolean,
  fetchCarrierDetails: (token1: any) => Promise<any>
) {
  if (token || refresh) {
    fetchCarrierDetails(token);
  }
}

async function dotScope1(
  userDetails: any,
  setDotNumber: React.Dispatch<React.SetStateAction<undefined>>
) {
  let res = await dotVerify(userDetails);
  if (res?.content) {
    setDotNumber(true);
  }
}

function jsxContent(
  { router, disabled, setDisabled, setDotErr, setMcErr, setPhoneErrorVisible, setFaxErrorVisible, setRefresh, handleSubmit, onSubmit, control, errors, handlePhoneChange, formattedPhone, phoneErrorVisible, handleFaxChange, formattedfax, faxErrorVisible, isDotChecked, setMCNumber, setValue, setDotMc, dotMc, setDotNumber, renderNumberInput, inputClassName, propData, refresh, token, Load, setLoad, getAddressSuggestions, searchedSuggestions, bindSelectedAddress, setSelectedOriginDestination, selectedOriginDestination, DetailingCondition, collapsed, setCollapsed, Togglecollapsed, setToggleCollapsed, reset }: { router; disabled: boolean; setDisabled: React.Dispatch<React.SetStateAction<boolean>>; setDotErr: React.Dispatch<React.SetStateAction<undefined>>; setMcErr: React.Dispatch<React.SetStateAction<undefined>>; setPhoneErrorVisible: React.Dispatch<React.SetStateAction<boolean>>; setFaxErrorVisible: React.Dispatch<React.SetStateAction<boolean>>; setRefresh: React.Dispatch<React.SetStateAction<boolean>>; handleSubmit; onSubmit: (payload: FormData) => Promise<void>; control; errors; handlePhoneChange: (event: { target: { value: any; }; }) => void; formattedPhone: string; phoneErrorVisible: boolean; handleFaxChange: (event: { target: { value: any; }; }) => void; formattedfax: string; faxErrorVisible: boolean; isDotChecked: boolean; setMCNumber: React.Dispatch<React.SetStateAction<undefined>>; setValue; setDotMc: React.Dispatch<React.SetStateAction<string>>; dotMc: string; setDotNumber: React.Dispatch<React.SetStateAction<undefined>>; renderNumberInput: () => JSX.Element; inputClassName: string; propData: undefined; refresh: boolean; collapsed: any, setCollapsed: any; Togglecollapsed: any, setToggleCollapsed: any; reset: any; }): JSX.Element {
  const renderToggleAndRegionBox = Togglecollapsed ? (
    <>
      <ToggleBar
        toggleData={propData}
        Togglecollapsed={Togglecollapsed}
        setToggleCollapsed={setToggleCollapsed}
      />
      <RegionBox
        propData={propData}
        refresh={setRefresh}
      />
    </>
  ) : (
    ""
  );

  return (
    <>
      {jsxContent12(router)}
      {jsxContent3({ disabled, setDisabled, setDotErr, setMcErr, setPhoneErrorVisible, setFaxErrorVisible, setRefresh, handleSubmit, onSubmit, control, errors, handlePhoneChange, formattedPhone, phoneErrorVisible, handleFaxChange, formattedfax, faxErrorVisible, router, isDotChecked, setMCNumber, setValue, setDotMc, dotMc, setDotNumber, renderNumberInput, inputClassName, getAddressSuggestions, searchedSuggestions, bindSelectedAddress, setSelectedOriginDestination, selectedOriginDestination, DetailingCondition, collapsed, setCollapsed, Togglecollapsed, setToggleCollapsed})}
      <BillingInfoDetails prop={propData} setRefresh={setRefresh}/>
      <SubscriptionDetails
        prop={propData}
        query={router?.query?.type}
        setRefresh={setRefresh}
        DetailingCondition={DetailingCondition}
      />
      {router?.query?.type === "carrier" ? <>
        <BusinessAddressUser prop={propData} userid={router?.query?.id} setRefresh={setRefresh} />
        <div className="details_bot">
          <div className="profile_edit_body-detail accordion_cls my-3">
            
            <div onClick={() => setToggleCollapsed(!Togglecollapsed)} className='profile_heading-general link_general'>
              <h3>Carrier Details</h3>
              <svg   xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-down-fill" viewBox="0 0 16 16">
                <path d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z" />
              </svg>
            </div>
       {renderToggleAndRegionBox}
        
        </div>
        </div>
        <ContactNames userid={router?.query?.id} adminToken={propData} Load={Load} setLoad={setLoad} check={true} keys={1} /> </> : ""}

      <AssociateUserTable
        datalisting={undefined}
        breadcrumbs={[]}
        disabled={disabled as any}
        refreshdata={refresh}
        propData={propData}
        DetailingCondition={DetailingCondition}
      />
    </>
  );
}

function jsxContent3({ disabled, setDisabled, setDotErr, setMcErr, setPhoneErrorVisible, setFaxErrorVisible, setRefresh, handleSubmit, onSubmit, control, errors, handlePhoneChange, formattedPhone, phoneErrorVisible, handleFaxChange, formattedfax, faxErrorVisible, router, isDotChecked, setMCNumber, setValue, setDotMc, dotMc, setDotNumber, renderNumberInput, inputClassName, getAddressSuggestions, searchedSuggestions, bindSelectedAddress, setSelectedOriginDestination, selectedOriginDestination, DetailingCondition, collapsed, setCollapsed }: { disabled: boolean; setDisabled: React.Dispatch<React.SetStateAction<boolean>>; setDotErr: React.Dispatch<React.SetStateAction<undefined>>; setMcErr: React.Dispatch<React.SetStateAction<undefined>>; setPhoneErrorVisible: React.Dispatch<React.SetStateAction<boolean>>; setFaxErrorVisible: React.Dispatch<React.SetStateAction<boolean>>; setRefresh: React.Dispatch<React.SetStateAction<boolean>>; handleSubmit: any; onSubmit: (payload: FormData) => Promise<void>; control: any; errors: any; handlePhoneChange: (event: { target: { value: any; }; }) => void; formattedPhone: string; phoneErrorVisible: boolean; handleFaxChange: (event: { target: { value: any; }; }) => void; formattedfax: string; faxErrorVisible: boolean; router: any; isDotChecked: boolean; setMCNumber: React.Dispatch<React.SetStateAction<undefined>>; setValue: any; setDotMc: React.Dispatch<React.SetStateAction<string>>; dotMc: string; setDotNumber: React.Dispatch<React.SetStateAction<undefined>>; renderNumberInput: () => JSX.Element; inputClassName: string; collapsed:any; setCollapsed:any;}) {
  const suggestionsClass = searchedSuggestions.length < 1 ? "d-none" : "";
  const isCustomerType = router?.query?.type === "customer";
  const isCarrierType = router?.query?.type === "carrier";

  return <div className="details_bot">
    <div className='profile_edit_body-detail my-3 accordion_cls'>
      <div>
        <ToastContainer />

        <div onClick={() => setCollapsed(!collapsed)} className='profile_heading-general link_general'>
          <h3>General Information</h3>
          <svg  xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-down-fill" viewBox="0 0 16 16">
            <path d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z" />
          </svg>
        </div>
        {collapsed ?
        <><div>  {disabledChecked(disabled, setDisabled, setDotErr, setMcErr, setPhoneErrorVisible, setFaxErrorVisible, setRefresh)}</div><form className='row g-4' onSubmit={handleSubmit(onSubmit)}>
            <div className='col-md-6  '>
              <FormLabel htmlFor='inputbusiness_company'>
                Company Name:
              </FormLabel>
              <Controller
                name='business_company'
                control={control}
                render={({ field }) => (
                  <FormControl
                    disabled={disabled}
                    type='text'
                    className={companyChecked2(errors)}
                    id='business_company'
                    {...field} />
                )} />
              {companyAddressScope2(errors)}
            </div>
            <div className='col-md-6  '>
              <FormLabel htmlFor='inputZip'>Company Address:</FormLabel>
              <Controller
                name='business_address'
                control={control}
                render={({ field }) => (
                  <FormControl
                    disabled={disabled}

                    type='text'
                    className={caClass(errors)}
                    id='business_address'
                    {...field}
                    onInput={(e) => {
                      e.preventDefault();
                      getAddressSuggestions(e);
                    } }
                    value={selectedOriginDestination}
                    onChange={(e) => {
                      setSelectedOriginDestination(e.target.value);
                    } } />
                )} />
              <div
                className={suggestionsClass}
              >
                <ul className='city-listing-css' style={{ zIndex: 99 }}>
                  {searchedSuggestions.map((item: any) => (
                    <li
                      key={item.name}
                      onClick={() => {
                        bindSelectedAddress({
                          name: item.name,
                          lat: item.lat,
                          lng: item.lng,
                          state_code: item.state_code,
                          post_code: item.post_code,
                          state: item.state,
                          city: item.city,
                        });
                        setSelectedOriginDestination(item.name);
                      } }
                    >
                      <div className='mb-3'>{item?.name}</div>
                    </li>
                  ))}
                </ul>
              </div>
              {errCa(errors)}
            </div>
            <div className='col-md-3'>
              <FormLabel htmlFor='inputbusiness_phone'>Phone:</FormLabel>
              <Controller
                name='business_phone'
                control={control}
                render={({ field }) => (
                  <FormControl
                    disabled={disabled}
                    type='text'
                    className={companyCheckedClass3(errors)}
                    id='business_phone'
                    {...field}
                    onChange={handlePhoneChange}
                    value={formattedPhone} />
                )} />
              {phoneControlAddress(phoneErrorVisible)}

              {phoneBussinessEvent(errors)}
            </div>
            <div className='col-md-3'>
              <FormLabel htmlFor='inputbusiness_fax'>Fax:</FormLabel>
              <Controller
                name='business_fax'
                control={control}
                render={({ field }) => (
                  <FormControl
                    disabled={disabled}
                    type='text'
                    className={faxChecked3(errors)}
                    id='business_fax'
                    {...field}
                    onChange={handleFaxChange}
                    value={formattedfax} />
                )} />
              {faxErrorVisibleScope(faxErrorVisible)}
              {faxErrorVisibleScopeError(errors)}
            </div>
            <div className='col-md-3  '>
              <FormLabel htmlFor='inputZip'>Company Website:</FormLabel>
              <Controller
                name='business_web_site'
                control={control}
                render={({ field }) => (
                  <FormControl
                    disabled={disabled}
                    type='text'
                    className={websiteIndoClass(errors)}
                    id='inputZip'
                    {...field} />
                )} />
              {websiteIndoErr(errors)}
            </div>

            <div
              className='col-md-3  '
              hidden={hiddenScope(router)}
            >
              <FormLabel htmlFor='inputscac_code'>SCAC Code:</FormLabel>
              <Controller
                name='scac_code'
                control={control}
                render={({ field }) => (
                  <FormControl
                    maxLength={10}
                    disabled={disabled}
                    type='text'
                    className={scalClassScope(errors)}
                    id='scac_code'

                    {...field}

                    onChange={(e) => {
                      const inputValue = e.target.value.toUpperCase();
                      if (/^[A-Z]*$/.test(inputValue)) {
                        field.onChange(inputValue);
                      }
                    } } />
                )} />
              {scalClassScopeErr(errors)}
            </div>
            <div className='col-md-3  '>
              <FormLabel htmlFor='inputcity'>City:</FormLabel>
              <Controller
                name='business_city'
                control={control}
                render={({ field }) => (
                  <FormControl
                    disabled
                    type='text'
                    className={businessCityErr(errors)}
                    id='city'
                    {...field} />
                )} />
              {businessCityErr1(errors)}
            </div>
            <div className='col-md-3  '>
              <div className='select_group'>
                <FormLabel htmlFor='inputbusiness_state_code'>
                  Country:
                </FormLabel>
                <Controller
                  name='country'
                  control={control}
                  defaultValue='US'
                  render={({ field }) => (
                    <FormControl
                      as='select'
                      id='country'
                      disabled
                      className={countryStateClass(errors)}
                      {...field}
                    >
                      <option selected value='US'>
                        US
                      </option>
                    </FormControl>
                  )} />
              </div>
              {CountryErr(errors)}
            </div>
            <div className='col-md-3'>
              <FormLabel htmlFor='inputcity'>State:</FormLabel>
              <Controller
                name='business_state_code'
                control={control}
                render={({ field }) => (
                  <FormControl
                    disabled
                    type='text'
                    className={StateClassName1(errors)}
                    id='city'
                    {...field} />
                )} />
              {StateClassName1Err(errors)}
            </div>
            <div className='col-md-3  '>
              <FormLabel htmlFor='inputbusiness_zip'>Zip:</FormLabel>
              <Controller
                name='business_zip'
                control={control}
                render={({ field }) => (
                  <FormControl
                    disabled
                    type='text'
                    className={newFunction(errors)}
                    id='business_zip'
                    {...field} />
                )} />
              {zipClassName1Err(errors)}
            </div>
            <div
              className='col-md-3  '
              style={{
                display: "flex",
                gap: "10px",
                justifyContent: "space-between",
                display: "flex",
                alignItems: "center",
              }}
            >
              <div
                className='select_group '
                style={{
                  display: "flex",
                  gap: "5px",
                  justifyContent: "space-around",
                  display: "flex",
                  alignItems: "baseline",
                  margin: "inherit",
                }}
              >
                <FormLabel htmlFor='inputis_active'>
                  Client Draydex Subscription
                </FormLabel>
                <div>
                  <Controller
                    name='is_active'
                    control={control}
                    render={({ field }) => (
                      <FormControl
                        disabled={disabled || DetailingCondition}

                        as='select'
                        id='inputis_active'
                        className={ActiveInactiveClass(errors)}
                        {...field}
                      >
                        <option value=''>Select Status</option>
                        <>
                          <option value='1'>Active</option>
                          <option value='0'>Inactive</option>
                        </>
                        );
                      </FormControl>
                    )} />
                </div>
              </div>
              {ActiveInactiveClassErr(errors)}

            </div>
            <div className='col-md-3'>
              <FormLabel htmlFor='inputbusiness_zip'>Username:</FormLabel>
              <Controller
                name='Username'
                control={control}
                render={({ field }) => (
                  <FormControl
                    disabled={true}
                    type='text'
                    className={newFunction(errors)}
                    id='Username'
                    {...field} />
                )} />
            </div>
            <div className='col-md-3'>
              <FormLabel htmlFor='inputbusiness_zip'>Password:</FormLabel>
              <Controller
                name='password'
                control={control}
                render={({ field }) => (
                  <FormControl
                    disabled={true}
                    type='text'
                    className={newFunction(errors)}
                    id='password'
                    {...field} />
                )} />
            </div>
            {isCustomerType && (
              <div className='col-md-3'>
                <FormLabel htmlFor='inputbusiness_zip'>Dot Number:</FormLabel>
                <Controller
                  name='dot_num'
                  control={control}
                  render={({ field }) => (
                    <FormControl
                    disabled={true}
                      type='text'
                      id='dot_num'
                      {...field}
                    />
                  )}
                />
              </div>
            )}
            {isCarrierType && (
              <>
                <div className='profile_heading-general'>
                  <h3>FMCSA DATA</h3>
                </div>
              
                {renderNumberInput()}

                <div className='col-md-3'>
                  <FormLabel htmlFor='inputbusiness_zip'>Entity Type:</FormLabel>
                  <Controller
                    name='entity_type'
                    control={control}
                    render={({ field }) => (
                      <FormControl disabled={true} type='text' id='entity_type' {...field} />
                    )}
                  />
                  {entity_typeErrs(errors)}
                </div>

                <div className='col-md-3'>
                  <FormLabel htmlFor='inputbusiness_zip'>Legal Name:</FormLabel>
                  <Controller
                    name='leagal_name'
                    control={control}
                    className={inputClassName}
                    render={({ field }) => (
                      <FormControl disabled={true} type='text' id='leagal_name' {...field} />
                    )}
                  />
                  {LegalErrorsScope(errors)}
                </div>

                <div className='col-md-6'>
                  <FormLabel htmlFor='inputbusiness_zip'>DBA Name:</FormLabel>
                  <Controller
                    name='sw_dba_name'
                    control={control}
                    render={({ field }) => (
                      <FormControl disabled={true} type='text' id='sw_dba_name' {...field} />
                    )}
                  />
                  {dbaErrorsScope(errors)}
                </div>

                <div className='col-md-3'>
                  <FormLabel htmlFor='inputbusiness_zip'>Drivers Total:</FormLabel>
                  <Controller
                    name='sw_drivers_total'
                    control={control}
                    render={({ field: { onChange, value, ...rest } }) => (
                      <FormControl
                        disabled={disabled}
                        type='number'
                        id='sw_drivers_total'
                        {...rest}
                        value={value}
                        onChange={(e) => {
                          onChangeDriversMod(e, onChange);
                        }}
                      />
                    )}
                  />
                  {driversErrorsScope(errors)}
                </div>

                <div className='col-md-3'>
                  <FormLabel htmlFor='inputbusiness_zip'>Power Units Total:</FormLabel>
                  <Controller
                    name='sw_power_units_total'
                    control={control}
                    render={({ field: { onChange, value, ...rest } }) => (
                      <FormControl
                        type='text'
                        id='sw_power_units_total'
                        maxLength={10} 
                        {...rest}
                        disabled={disabled}
                        value={value}
                        onChange={(e) => {
                          onChangeDriversMod(e, onChange);
                        }}
                      />
                    )}
                  />
                  {powerUnitErrors(errors)}
                </div>
              </>
            )}
            <div className='col-12 primary-save'>
              <Button
                hidden={disabled}
                type='submit'
                className='btn btn-primary'
              >
                Update
              </Button>
            </div>
          </form></>
      :""}
      
      </div>
    </div>
  </div>
}

function driversErrorsScope(errors: any): React.ReactNode {
  return errors?.sw_drivers_total && <p className='text-danger'>{errors?.sw_drivers_total.message}</p>;
}

function onChangeDriversMod(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>, onChange: (event: any) => void) {
  const inputValue = e.target.value;
  if (/^\d*$/.test(inputValue) && inputValue.length <= 5) {
    onChange(inputValue);
  }
}

function dbaErrorsScope(errors: any): React.ReactNode {
  return errors?.sw_dba_name && <p className='text-danger'>{errors?.sw_dba_name.message}</p>;
}

function LegalErrorsScope(errors: any): React.ReactNode {
  return errors?.leagal_name && <p className='text-danger'>{errors?.leagal_name.message}</p>;
}

function entity_typeErrs(errors: any): React.ReactNode {
  return errors?.entity_type && (
    <p className='text-danger'>
      {errors?.entity_type.message}
    </p>
  );
}

function powerUnitErrors(errors: any): React.ReactNode {
  return errors?.sw_power_units_total && (
    <p className='text-danger'>
      {errors?.sw_power_units_total.message}
    </p>
  );
}

function ActiveInactiveClassErr(errors: any): React.ReactNode {
  return errors.is_active && (
    <p className='text-danger'>{errors.is_active.message}</p>
  );
}

function ActiveInactiveClass(errors: any): string | undefined {
  return `form-select ${errors.is_active ? "is-invalid" : ""}`;
}

function zipClassName1Err(errors: any): React.ReactNode {
  return errors.business_zip && (
    <p className='text-danger'>{errors.business_zip.message}</p>
  );
}

function newFunction(errors: any): string | undefined {
  return `form-control ${errors.Username ? "is-invalid" : ""}`;
}

function StateClassName1Err(errors: any): React.ReactNode {
  return errors.business_state_code && (
    <p className='text-danger'>
      {errors.business_state_code.message}
    </p>
  );
}

function StateClassName1(errors: any): string | undefined {
  return `form-control ${errors.business_state_code ? "is-invalid" : ""}`;
}

function CountryErr(errors: any): React.ReactNode {
  return errors.country && (
    <p className='text-danger'>{errors.country.message}</p>
  );
}

function countryStateClass(errors: any): string | undefined {
  return `form-select ${errors.country ? "is-invalid" : ""} `;
}

function businessCityErr1(errors: any): React.ReactNode {
  return errors.business_city && (
    <p className='text-danger'>{errors.business_city.message}</p>
  );
}

function businessCityErr(errors: any): string | undefined {
  return `form-control ${errors.business_city ? "is-invalid" : ""}`;
}

function scalClassScopeErr(errors: any): React.ReactNode {
  return errors.scac_code && (
    <p className='text-danger'>{errors.scac_code.message}</p>
  );
}

function scalClassScope(errors: any): string | undefined {
  return `form-control ${errors.scac_code ? "is-invalid" : ""}`;
}

function hiddenScope(router: any): boolean | undefined {
  return router?.query?.type === "customer" ? true : false;
}

function websiteIndoErr(errors: any): React.ReactNode {
  return errors.business_web_site && (
    <p className='text-danger'>
      {errors.business_web_site.message}
    </p>
  );
}

function websiteIndoClass(errors: any): string | undefined {
  return `form-control ${errors.business_web_site ? "is-invalid" : ""}`;
}

function faxErrorVisibleScopeError(errors: any): React.ReactNode {
  return errors.business_fax && (
    <p className='text-danger'>{faxErr2(errors)}</p>
  );
}

function faxErrorVisibleScope(faxErrorVisible: boolean): React.ReactNode {
  return faxErrorVisible && (
    <p className='text-danger'>
      Billing fax must have at least 10 digits
    </p>
  );
}

function phoneBussinessEvent(errors: any): React.ReactNode {
  return errors.business_phone && (
    <p className='text-danger'>{errors.business_phone.message}</p>
  );
}

function phoneControlAddress(phoneErrorVisible: boolean): React.ReactNode {
  return phoneErrorVisible && (
    <p className='text-danger'>
     Phone number must be between 10 and 11 digits

    </p>
  );
}

function companyAddressScope2(errors: any): React.ReactNode {
  return errors.business_company && (
    <p className='text-danger'>
      {errors.business_company.message}
    </p>
  );
}

function errCa(errors: any): React.ReactNode {
  return errors.business_address && (
    <p className='text-danger'>
      {errors.business_address.message}
    </p>
  );
}

function caClass(errors: any): string | undefined {
  return `form-control ${errors.business_address ? "is-invalid" : ""}`;
}

function faxErr2(errors: any): React.ReactNode {
  return errors.business_fax.message;
}

function faxChecked3(errors: any): string | undefined {
  return `form-control ${errors.business_fax ? "is-invalid" : ""}`;
}

function companyCheckedClass3(errors: any): string | undefined {
  return `form-control ${errors.business_phone ? "is-invalid" : ""}`;
}

function companyChecked2(errors: any): string | undefined {
  return `form-control ${errors.business_company ? "is-invalid" : ""}`;
}

function disabledChecked(disabled: boolean, setDisabled: React.Dispatch<React.SetStateAction<boolean>>, setDotErr: React.Dispatch<React.SetStateAction<undefined>>, setMcErr: React.Dispatch<React.SetStateAction<undefined>>, setPhoneErrorVisible: React.Dispatch<React.SetStateAction<boolean>>, setFaxErrorVisible: React.Dispatch<React.SetStateAction<boolean>>, setRefresh: React.Dispatch<React.SetStateAction<boolean>>): React.ReactNode {
  return disabled ? (
    <div
      className='edit_btn_block'
      onClick={() => setDisabled(!disabled)}
    >
      <a className='btn_edit'>
        <span>
          <svg
            xmlns='http:www.w3.org/2000/svg'
            width='14'
            height='15'
            viewBox='0 0 14 15'
            fill='none'
          >
            <g clip-path='url(#clip0_1098_1233)'>
              <path
                d='M8.20167 5.76167L8.73833 6.29833L3.45333 11.5833H2.91667V11.0467L8.20167 5.76167ZM10.3017 2.25C10.1558 2.25 10.0042 2.30833 9.89333 2.41917L8.82583 3.48667L11.0133 5.67417L12.0808 4.60667C12.3083 4.37917 12.3083 4.01167 12.0808 3.78417L10.7158 2.41917C10.5992 2.3025 10.4533 2.25 10.3017 2.25ZM8.20167 4.11083L1.75 10.5625V12.75H3.9375L10.3892 6.29833L8.20167 4.11083Z'
                fill='#060707' />
            </g>
            <defs>
              <clipPath id='clip0_1098_1233'>
                <rect
                  width='14'
                  height='14'
                  fill='white'
                  transform='translate(0 0.5)' />
              </clipPath>
            </defs>
          </svg>
        </span>{" "}
        Edit
      </a>
    </div>
  ) : (
    <div style={{ textAlign: "end" }}>
      <button
        onClick={() => {
          setDisabled(!disabled);
          setDotErr("");
          setMcErr("");
          setPhoneErrorVisible(false);
          setFaxErrorVisible(false);
          setRefresh(true);
          setValue("entity_type", "");
        }}
        type='button'
        className='btn btn-primary'
      >
        Cancel
      </button>
    </div>
  );
}

function jsxContent12(router: any) {
  return <div style={{ textAlign: "end" }}>
    <button
      onClick={() => router.push("/users")}
      type='button'
      className='btn btn-primary divStylecss-update'
    >
     
     <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-arrow-left-short" viewBox="0 0 16 16">
  <path fill-rule="evenodd" d="M12 8a.5.5 0 0 1-.5.5H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5a.5.5 0 0 1 .5.5"/>
</svg>
      Back
    </button>
  </div>;
}

function detilsFetchScope(
  token1: any,
  userId: string | string[] | undefined,
  prefillData: (userDetails: any, response: any) => void,
  setPropData: React.Dispatch<React.SetStateAction<undefined>>,
  setRefresh: React.Dispatch<React.SetStateAction<boolean>>,
  setLoad: any,
  setDetailingCondition:any
) {


  return getGeneralInformation(token1, userId)
    .then((response) => {
      
      setDetailingCondition(response?.data?.email_verification_token)
      const userDetails = response?.data?.details?.general_info;
      prefillData(userDetails, response);
      setPropData(response);
      setRefresh(false);
      setLoad(false)
    })
    .catch((error) => {
      return error;
    });
}

function inputRender(
  { dotMc, control, disabled, register, handleVerified, dotNumberLoading, checkDot, errors, dotErr, handleVerifiedMc, MCNumberLoading, checkDotMC, mcErr }: { dotMc: string; control; disabled: boolean; register; handleVerified: (event: { target: { value: any; }; }) => Promise<void>; dotNumberLoading: boolean; checkDot: () => JSX.Element | undefined; errors; dotErr: undefined; handleVerifiedMc: (event: { target: { value: any; }; }) => Promise<void>; MCNumberLoading: boolean; checkDotMC: () => JSX.Element | undefined; mcErr: undefined; }) {
  return () => {
      return (
        <><div className='col-md-3'>
          <FormLabel htmlFor='inputbusiness_zip'>DOT Number:</FormLabel>
          <Controller
            name='dot_number'
            disabled={disabled}
            control={control}
            render={({ field }) => (
              <FormControl
                // disabled={true}
                type='text'
                id='dot_number'
                {...field}
                {...register("dot_number", {
                  onChange: (e) => {
                    handleVerified(e);
                  },
                })} />
            )} />
          {dotNumberLoading ? (
            <div className='mc-dot'>
              <div className='loader'>
                <div className='circle'></div>
                <div className='checkmark draw'></div>
              </div>
            </div>
          ) : (
            checkDot()
          )}
          {errors?.dot_number?errors?.dot_number && (
            <p className='text-danger'>{errors?.dot_number.message}</p>
          ):dotErr && <p className='text-danger'>{dotErr}</p>}

          
        </div><div className='col-md-3'>
            <FormLabel htmlFor='inputbusiness_zip'>MC Number:</FormLabel>
            <Controller
              name='mc_number'
              disabled={disabled}
              control={control}
              className={`form-select ${errors.mc_number ? "is-invalid" : ""}`}
              render={({ field }) => (
                <FormControl
                  // disabled={true}
                  type='text'
                  id='mc_number'
                  {...field}
                  {...register("mc_number", {
                    onChange: (e) => {
                      handleVerifiedMc(e);
                    },
                  })} />
              )} />
            {MCNumberLoading ? (
              <div className='mc-dot'>
                <div className='loader'>
                  <div className='circle'></div>
                  <div className='checkmark draw'></div>
                </div>
              </div>
            ) : (
              checkDotMC()
            )}
            {errors?.mc_number?errors?.mc_number && (
              <p className='text-danger'>{errors?.mc_number.message}</p>
            ):mcErr && <p className='text-danger'>{mcErr}</p>}
            
          </div></>
      );
    }
  }

function PrefillScope({
  userDetails,
  response,
  VerifyDot,
  Verifymc,
  setDotMc,
  setDotErr,
  setMcErr,
  setValue,
  setFormattedfax,
  setFormattedPhone,
  setSelectedOriginDestination
}: {
  userDetails: any;
  VerifyDot: (userDetails: any) => Promise<void>;
  Verifymc: (userDetails: any) => Promise<void>;
  setDotMc: React.Dispatch<React.SetStateAction<string>>;
  setDotErr: React.Dispatch<React.SetStateAction<undefined>>;
  setMcErr: React.Dispatch<React.SetStateAction<undefined>>;
  setValue: (field: string, value: any) => void;
  setFormattedfax: React.Dispatch<React.SetStateAction<string>>;
    setFormattedPhone: React.Dispatch<React.SetStateAction<string>>;
    setSelectedOriginDestination:any;
}) {


  if (userDetails?.fmcsa_data?.dot_number) {
    VerifyDot(userDetails.fmcsa_data.dot_number);
  }

  if (userDetails?.fmcsa_data?.mc_number) {
    Verifymc(userDetails.fmcsa_data.mc_number);
  }

  let isActiveValue = "";
  if (userDetails?.is_active === 1) {
    isActiveValue = "1";
  } else if (userDetails?.is_active === 0) {
    isActiveValue = "0";
  }

  if (userDetails?.fmcsa_data?.mc_number) {
    setDotMc("MC");
    setDotErr(undefined);
  }

  if (mcScope12(userDetails)) {
    setDotMc("DOT");
    setMcErr(undefined);
  }

  const zipCode = userDetails?.business_address?.match(/\b\d{5}\b/);
  const formattedBusinessPhone = userDetails?.phone?.replace(
    /^(\d{3})(\d{3})(\d{4,5})$/,
    "$1-$2-$3"
  );

  valueSetScopeMod({ setValue, isActiveValue, userDetails, setFormattedfax, formattedBusinessPhone, setFormattedPhone, zipCode, response, setSelectedOriginDestination });
}


function valueSetScopeMod({ setValue, isActiveValue, userDetails, setFormattedfax, formattedBusinessPhone, setFormattedPhone, zipCode, response, setSelectedOriginDestination }: { setValue: (field: string, value: any) => void; isActiveValue: string; userDetails: any; setFormattedfax: React.Dispatch<React.SetStateAction<string>>; formattedBusinessPhone: any; setFormattedPhone: React.Dispatch<React.SetStateAction<string>>; zipCode: any; response: any; }) {
  valueSetScopeModInit({ setValue, isActiveValue, userDetails, setFormattedfax, formattedBusinessPhone, setFormattedPhone, zipCode, setSelectedOriginDestination });
  setValue("leagal_name", userDetails?.fmcsa_data?.leagal_name || "N/A");
  addUserPasswordDetails(setValue, response);
  setValue("sw_dba_name", userDetails?.fmcsa_data?.sw_dba_name || "N/A");
  setValue("entity_type", userDetails?.entity_type || "N/A");
  setValue("sw_drivers_total", userDetails?.fmcsa_data?.sw_drivers_total || "N/A");
  setValue("sw_power_units_total", userDetails?.fmcsa_data?.sw_power_units_total || "N/A");
  if (userDetails?.fmcsa_data?.dot_number) {
    setValue("dot_number", userDetails?.fmcsa_data?.dot_number);
  }

  setValue(
    "mc_number",
    userDetails?.fmcsa_data?.mc_number ? userDetails?.fmcsa_data?.mc_number : ""
  );
}

function valueSetScopeModInit({ setValue, isActiveValue, userDetails, setFormattedfax, formattedBusinessPhone, setFormattedPhone, zipCode, setSelectedOriginDestination }: { setValue: (field: string, value: any) => void; isActiveValue: string; userDetails: any; setFormattedfax: React.Dispatch<React.SetStateAction<string>>; formattedBusinessPhone: any; setFormattedPhone: React.Dispatch<React.SetStateAction<string>>; zipCode: any; }) {

  setValue("Username", userDetails?.business_company || "");
  setValue("business_company", userDetails?.business_company || "");
  setValue("dot_num", userDetails?.dot_number || "");
  setValue("business_phone", formattedBusinessPhone || "");
  setFormattedPhone(formattedBusinessPhone || "");
  setValue("business_city", userDetails?.city || "");
  setValue("country", userDetails?.country || "");
  setValue("business_state_code", userDetails?.state || "");
  setValue("business_zip", userDetails?.accounting_zip || "");
  setValue("business_address", userDetails?.business_address || "");
  setSelectedOriginDestination(userDetails?.business_address)
  setValue("business_web_site", userDetails?.business_web_site || "");
  setValue("scac_code", userDetails?.scac_code || "");
  valueSetScopeModInitFax(setValue, isActiveValue, userDetails, setFormattedfax);

}

function valueSetScopeModInitFax(setValue: (field: string, value: any) => void, isActiveValue: string, userDetails: any, setFormattedfax: React.Dispatch<React.SetStateAction<string>>) {
  setValue("is_active", isActiveValue);
  setValue("business_fax", userDetails?.business_fax || "");
  setFormattedfax(userDetails?.business_fax || "");
}

function addUserPasswordDetails(setValue: any, response: any) {
  setValue("Username", response?.data?.username);
  setValue(
    "password",
    response?.data?.password ?
      response?.data?.password[0] + '*'.repeat(response?.data?.password.length - 1) :
      "******"
  );
}

function mcScope12(userDetails: any) {
  return userDetails?.fmcsa_data?.dot_number &&
    userDetails?.fmcsa_data?.dot_number != "N/A";
}

async function verifyMcScope(
  userDetails: any,
  setMCNumber: React.Dispatch<React.SetStateAction<undefined>>
) {
  let res = await McVerify(userDetails);
  if (res?.content) {
    setMCNumber(true);
  }
}

function moduleScope(dotMc: string, router, schema) {

  return schema;
}

async function SuggestionScope12(event: any, setSearchSuggestions: React.Dispatch<React.SetStateAction<never[]>>) {
  try {
    await sujjestionChildScope(event, setSearchSuggestions);
  } catch (error) {
    setSearchSuggestions([]);
  }
}
async function sujjestionChildScope(event: any, setSearchSuggestions: React.Dispatch<React.SetStateAction<never[]>>) {
  const searchedString = event.target.value;
  if (searchedString.length > 2) {
    const searchResponse = await fetch(
      mapboxAddressActionUrl(searchedString)
    );
    const searchedResponseData = await searchResponse.json();
    let suggestionsArray: any = [];

    searchedResponseDataModScope(searchedResponseData, suggestionsArray);
    setSearchSuggestions(suggestionsArray);
  } else {
    setSearchSuggestions([]);
  }
}

function searchedResponseDataModScope(searchedResponseData: any, suggestionsArray: any) {
  searchedResponseData.features.map((item: any) => {
    let stateCode = null;
    let postalCode = null;
    let cityName = null;
    let stateName = null;

    // If the place_type is "postcode", get the postal code directly from item.text
    if (item.place_type.includes("postcode")) {
      postalCode = item.text; // The postal code is directly in the text field

      // City and state can still come from the context
      ({ cityName, stateCode, stateName } = forEachContent(item, cityName, stateCode, stateName));
    } else {
      // Otherwise, search through the context for the postal code, city, and state
      item.context.forEach((contextData: any) => {
        if (contextData.id.includes("postcode")) {
          postalCode = contextData.text;
        }
        if (contextData.id.includes("region")) {
          stateCode = contextData.short_code;
          stateName = contextData.text;
        }
        if (contextData.id.includes("place")) {
          cityName = contextData.text;
        }
      });
    }

    innerChild(item, stateCode, suggestionsArray, cityName, stateName, postalCode);
  });
}

function forEachContent(item: any, cityName: any, stateCode: any, stateName: any) {
  item.context.forEach((contextData: any) => {
    if (contextData.id.includes("place")) {
      cityName = contextData.text;
    }
    if (contextData.id.includes("region")) {
      stateCode = contextData.short_code;
      stateName = contextData.text;
    }
  });
  return { cityName, stateCode, stateName };
}

function innerChild(item: any, stateCode: null, suggestionsArray: any, cityName: null, stateName: null, postalCode: null) {
  if (item?.place_type?.[0] !== "country" && stateCode !== null) {
    suggestionsArray.push({
      name: item.place_name,
      city: cityName,
      state: stateName,
      lat: item?.center[1],
      lng: item.center[0],
      state_code: stateCode,
      post_code: postalCode,
    });
  }
}