/* eslint-disable react/jsx-key */
import React, { useEffect, useState, useRef } from "react";
import Image from "next/image";
import { useForm, Controller } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import * as Yup from 'yup';

import { ToastContainer, toast } from "react-toastify";
import {
  getStates,
  dotVerify,
  McVerify,
  getMarket,
  getTerminals,
  ClaimUsers,
  clientCreate,
  ClaimUsersEmail,
  McFmcVerify
} from "@/services/public";
import "primereact/resources/primereact.css";
import "primereact/resources/themes/saga-blue/theme.css";
import { MultiSelect, MultiSelectChangeEvent } from "primereact/multiselect";
import {
  Form,
  FormGroup,
  FormControl,
  Row,
  Col,
  Modal,
  Button,
} from "react-bootstrap";
import { useRouter } from 'next/router';
import { mapboxAddressActionUrl } from "@/helpers/projectHelper";
import { useSession } from "next-auth/react";
interface Props {
  states: {
    state_code: string;
    state_name: string;
    lat: string;
    lng: string;
    country_code: string;
    country_name: string;
  }[];
}

interface DynamicObjType {
  [key: string]: string | number | null;
}

interface Props {
  marketName: {
    id: number;
    name: string;
    state_code: number;
    zip: string;
    mode: string;
    lat: string;
    lng: string;
  }[];
}

export default function AddCarrier() {
  return AddCarrierJsx();
}

interface PropTypes {
  type?: string;
  id: string;
  placeHolder: string;
  register: any;
  errors: any;
  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
}

interface CustomPropType extends PropTypes {
  state: boolean;
}

const checkDotMod = (
  <div
    style={{
      position: "absolute",
      right: "10px",
      top: "50%",
      transform: "translateY(-50%)",
    }}
  >
    <Image width={20} height={20} src={"/images/tick.jpeg"} alt={""} />
  </div>
);
function AddCarrierJsx() {
  const router = useRouter();
  const [states, setStates] = useState([]);
  const [AddressVerify, setAddressVerify] = useState();
  const [PasswordVerify, setPasswordVerify] = useState();
  const [inviteId, setInviteId] = useState();
  const [dotNumberLoading, setDotNumberLoading] = useState(false);
  const [mcNumberLoading, setmcNumberLoading] = useState(false);
  const [buttonDisable, setButtonDisable] = useState(false);
  const [dotDisable, setDotDisable] = useState(false);
  const [mcDisable, setMcDisable] = useState(false);
  const [claimedEmail, setClaimedEmail] = useState<string>();
  const [searchedSuggestions, setSearchSuggestions] = useState([]);
  const [customeAddressError, setCustomeAddressError] = useState("");
  const [selectedOriginDestination, setSelectedOriginDestination] =
    useState("");
  const [RouterAddress, setRouterAddress] = useState();
  const [dotNumber, setDotNumber] = useState();
  const [mcNumber, setmcNumber] = useState();
  const [ClaimListing, setClaimListing] = useState<any[]>();
  const [selectedStateOptions, setSelecteStatedOptions] = useState([]);
  const [selectedTerminalOptions, setSelecteTerminalOptions] = useState(null);
  const [marketName, setMarketName] = useState([]);
  const [selectedMarkets, setSelectedMarkets] = useState(null);
  const [terminalName, setTerminalName] = useState([]);
  const [FormCity, setFormCity] = useState();
  const [FormState, setFormState] = useState();
  const toastShownRef = useRef(false);
  const [dotMc, setDotMc] = useState("MC");
 const [fmcsaDot,SetFmcsaDot]= useState();
  const [fmcsaMc, setFmcsaMc] = useState();
  const { data } = useSession();
  const [check, setCheck] = useState(true);

  useEffect(() => {
    if (data && data?.user) {
      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");
      }
    }
  }, [data]);

  useEffect(() => {
    getStates().then((response) => {
      statesMod4(response, setStates);
    });
  }, [setStates]);

  const { getTerminalData, getMarketData, handleSelectStateChange } = splitJsx(
    setMarketName,
    setTerminalName,
    setSelecteStatedOptions,
    selectedMarkets,
    setSelecteTerminalOptions,
    setSelectedMarkets
  );

  const handleSelectMarketChange = (e: MultiSelectChangeEvent) => {
    handleSelectMarketChangeMod(
      selectedTerminalOptions,
      setSelectedMarkets,
      e,
      getTerminalData,
      setSelecteTerminalOptions,
      setTerminalName
    );
  };

  const handleSelectTerminalChange = (e: MultiSelectChangeEvent) => {
    setSelecteTerminalOptions(e.value);
  };
  const zipCodeMatch = selectedOriginDestination.match(/\b(?:\d{5}(?:-\d{4})?|[A-Z]\d[A-Z] ?\d[A-Z]\d)\b/i);
  const { register, handleSubmit, setValue, control, formState, reset } =
    validatorCheck(router, dotMc,check);

  const [selectedOption, setSelectedOption] = useState("MC");
  const handleRadioChange = (option: React.SetStateAction<string>) => {
    handleRadioChangeMod({
      option,
      setCheck,
      setValue,
      setDotNumber,
      errors,
      setmcNumber,
      handleVerifiedMc,
      setDotMc,
      setSelectedOption,
    });
  };
  const resetMultiselect = () => {
    resetMultiselectMod(
      selectedTerminalOptions,
      setSelecteTerminalOptions,
      selectedMarkets
    );
  };

  const { errors } = formState;
  const [dbaName, setDbaName] = useState("");
  const [totalDrivers, setTotalDrivers] = useState();
  const [legalName, setLegalName] = useState("");
  const [totalPowerUnits, setTotalPowerUnits] = useState();
  const [brokerAuthorityStatus, setBrokerAuthorityStatus] = useState("");
  const [fmcsaData, setFmcsaData] = useState({});
  const [RouterCity, setRouterCity] = useState();
  const [RouterState, setRouterState] = useState();
  const onSubmit = async (datas: any) => {
    try {
  
      submitConditonalStates({
        setAddressVerify,
        datas,
        setPasswordVerify,
        setButtonDisable,
        setClaimedEmail,
        setFmcsaData,
        dbaName,
        totalDrivers,
        legalName,
        totalPowerUnits,
        brokerAuthorityStatus,
      });

      const payload = submitConditonalPayload(datas);

      const res = await ClaimUsers(payload);

      if (res?.count > 0) {
        return claimUserMod1(
          setClaimListing,
          res,
          setShowRegisterPopup,
          setButtonDisable
        );
      }

      await signUp(datas);
    } catch (error) {
      submitConditonalError(error);
    }
  };

  const signUp = async (signUpData: any) => {
    await signUpModScope({
      setButtonDisable,
      data: signUpData, // Update this reference
      RouterAddress,
      zipCodeMatch,
      inviteId,
      selectedStateOptions,
      selectedMarkets,
      selectedTerminalOptions,
      FormState,
      RouterState,
      FormCity,
      RouterCity,
      dbaName,
      totalDrivers,
      legalName,
      totalPowerUnits,
      brokerAuthorityStatus,
      handleResponse,
      fmcsaDot,
      fmcsaMc
    });
  };
  const handleResponse = (response: any) => {
    handleResponseMod({
      response,
      setButtonDisable,
      handleError,
      reset,
      setSelectedOriginDestination,
      setValue,
      setFormattedPhone,
      setSelectedMarkets,
      setSelecteTerminalOptions,
      setSelecteStatedOptions,
      setDotNumber,
      setmcNumber,
      router,
    });
  };

  const handleError = (response: any) => {
    handleErrorMod(setButtonDisable, response, resetFormValues);
  };

  const resetFormValues = () => {
    resetFormValuesMod(setmcNumber, reset, setValue, resetMultiselect);
  };

  const [formattedPhone, setFormattedPhone] = useState("");

  useEffect(() => {
    effectMod({
      router,
      setSelectedOption,
      setRouterAddress,
      setInviteId,
      setValue,
      setFormattedPhone,
      setSelectedOriginDestination,
      setRouterState,
      setRouterCity,
      getTerminalData,
      terminalName,
      states,
      getMarketData,
      marketName,
      setSelectedMarkets,
      setSelecteTerminalOptions,
      setSelecteStatedOptions,
    });
  }, [states, marketName]);

  const handlePhoneChange = (event: { target: { value: any } }) => {
    handlePhoneChangeMod(event, setFormattedPhone);
  };

  const handleVerified = async (event: { target: { value: any } }) => {
    await handleVerifiedMod({
      setValue,
      event,
      setDotNumberLoading,
      setDbaName,
      setTotalDrivers,
      setLegalName,
      setTotalPowerUnits,
      setBrokerAuthorityStatus,
      setDotDisable,
      errors,
      setDotNumber,
      setFmcsaMc,

    });
  };

  const handleVerifiedMc = async (event: { target: { value: any } }) => {
    await handleVerifiedMcMod({
      setValue,
      event,
      setmcNumberLoading,
      setDbaName,
      setTotalDrivers,
      setLegalName,
      setTotalPowerUnits,
      setBrokerAuthorityStatus,
      setMcDisable,
      setmcNumber,
      errors,
      SetFmcsaDot,
    });
  };
  const submitButtonText = () => {
    return submitButtonTextMod(buttonDisable);
  };

  async function getAddressSuggestions(event: any) {
    await SuggestionScope12(event, setSearchSuggestions);
  }

  type SelectAddressType = {
    name: string;
    lat: string;
    lng: string;
    state_code: string | null;
    post_code: string | null;
  };
  function bindSelectedAddress(item: SelectAddressType) {
    bindSelectedAddressMod(
      setValue,
      item,
      formState,
      setSearchSuggestions,
      setSelectedOriginDestination,
      setCustomeAddressError,
      setFormCity,
      setFormState
    );
  }
  const { checkmc, checkDot } = checkFmcsaMod(dotNumber, mcNumber);

  const [showRegisterPopup, setShowRegisterPopup] = useState(false);
  const [showClaimPopup, setShowClaimPopup] = useState(false);
  const [SendEmail, setSendEmail] = useState(false);

  const { toggleRegisterPopup, toggleClaimPopup, toggleEmailPopup } = toggleMod(
    setShowRegisterPopup,
    setShowClaimPopup,
    setSendEmail
  );
  const [claimId, setClaimID] = useState<number>();
  const { FinalClaim, UserClaim } = claimMod12(
    claimedEmail,
    claimId,
    PasswordVerify,
    AddressVerify,
    fmcsaData,
    setSendEmail,
    reset,
    setClaimedEmail,
    setSelectedOriginDestination,
    setPasswordVerify,
    setAddressVerify,
    setFormattedPhone,
    setDotNumberLoading,
    setDotNumber,
    router
  );

  return jsxContentFunc({
    handleSubmit,
    onSubmit,
    register,
    errors,
    router,
    customeAddressError,
    getAddressSuggestions,
    selectedOriginDestination,
    setSelectedOriginDestination,
    setValue,
    searchedSuggestions,
    bindSelectedAddress,
    selectedOption,
    handleRadioChange,
    handleVerifiedMc,
    mcNumberLoading,
    checkmc,
    handleVerified,
    dotNumberLoading,
    checkDot,
    formattedPhone,
    handlePhoneChange,
    control,
    states,
    selectedStateOptions,
    handleSelectStateChange,
    marketName,
    selectedMarkets,
    handleSelectMarketChange,
    terminalName,
    selectedTerminalOptions,
    handleSelectTerminalChange,
    buttonDisable,
    dotDisable,
    mcDisable,
    submitButtonText,
    showRegisterPopup,
    toggleRegisterPopup,
    setShowClaimPopup,
    setShowRegisterPopup,
    showClaimPopup,
    toggleClaimPopup,
    ClaimListing,
    setSendEmail,
    setClaimID,
    SendEmail,
    toggleEmailPopup,
    claimedEmail,
    FinalClaim,
    UserClaim,
  });
}
function jsxContentFunc({
  handleSubmit,
  onSubmit,
  register,
  errors,
  router,
  customeAddressError,
  getAddressSuggestions,
  selectedOriginDestination,
  setSelectedOriginDestination,
  setValue,
  searchedSuggestions,
  bindSelectedAddress,
  selectedOption,
  handleRadioChange,
  handleVerifiedMc,
  mcNumberLoading,
  checkmc,
  handleVerified,
  dotNumberLoading,
  checkDot,
  formattedPhone,
  handlePhoneChange,
  control,
  states,
  selectedStateOptions,
  handleSelectStateChange,
  marketName,
  selectedMarkets,
  handleSelectMarketChange,
  terminalName,
  selectedTerminalOptions,
  handleSelectTerminalChange,
  buttonDisable,
  dotDisable,
  mcDisable,
  submitButtonText,
  showRegisterPopup,
  toggleRegisterPopup,
  setShowClaimPopup,
  setShowRegisterPopup,
  showClaimPopup,
  toggleClaimPopup,
  ClaimListing,
  setSendEmail,
  setClaimID,
  SendEmail,
  toggleEmailPopup,
  claimedEmail,
  FinalClaim,
  UserClaim,
}: {
  handleSubmit: any;
  onSubmit: (data: any) => Promise<void>;
  register: any;
  errors: any;
  router;
  customeAddressError: string;
  getAddressSuggestions: (event: any) => Promise<void>;
  selectedOriginDestination: string;
  setSelectedOriginDestination: React.Dispatch<React.SetStateAction<string>>;
  setValue: any;
  searchedSuggestions: never[];
  bindSelectedAddress: (item: {
    name: string;
    lat: string;
    lng: string;
    state_code: string | null;
    post_code: string | null;
  }) => void;
  selectedOption: string;
  handleRadioChange: (option: React.SetStateAction<string>) => void;
  handleVerifiedMc: (event: { target: { value: any } }) => Promise<void>;
  mcNumberLoading: boolean;
  checkmc: () => JSX.Element | undefined;
  handleVerified: (event: { target: { value: any } }) => Promise<void>;
  dotNumberLoading: boolean;
  checkDot: () => JSX.Element | undefined;
  formattedPhone: string;
  handlePhoneChange: (event: { target: { value: any } }) => void;
  control: any;
  states: never[];
  selectedStateOptions: never[];
  handleSelectStateChange: (
    e: MultiSelectChangeEvent,
    currentVal: any[]
  ) => void;
  marketName: never[];
  selectedMarkets: null;
  handleSelectMarketChange: (e: MultiSelectChangeEvent) => void;
  terminalName: never[];
  selectedTerminalOptions: null;
  handleSelectTerminalChange: (e: MultiSelectChangeEvent) => void;
  buttonDisable: boolean;
  dotDisable: boolean;
  mcDisable: boolean;
  submitButtonText: () => any;
  showRegisterPopup: boolean;
  toggleRegisterPopup: () => void;
  setShowClaimPopup: React.Dispatch<React.SetStateAction<boolean>>;
  setShowRegisterPopup: React.Dispatch<React.SetStateAction<boolean>>;
  showClaimPopup: boolean;
  toggleClaimPopup: () => void;
  ClaimListing: any[] | undefined;
  setSendEmail: React.Dispatch<React.SetStateAction<boolean>>;
  setClaimID: React.Dispatch<React.SetStateAction<number | undefined>>;
  SendEmail: boolean;
  toggleEmailPopup: () => void;
  claimedEmail: string | undefined;
  FinalClaim: (e: any) => void;
  UserClaim: (i: any) => Promise<void>;
}) {
  const onShow = () => {
    let selectAllCheckbox: any = document.querySelector(
      ".p-multiselect-header > .p-checkbox"
    );
    selectAllCheckbox.style.marginRight = "8px";
    selectAllCheckbox.after(" Select All");
  };
  return (
    <>
      <ToastContainer />
      <Row className='justify-content-center my-auto'>
        <div className='end-icon'>
          <button
            onClick={() => router.push("/users")}
            type='button'
            className='btn btn-primary svg-item-back-carr 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>
        < div className="text-center heading my-3 my-md-5 table-headers-fallback">
        <h3 className=" h3_text ">Add Carrier</h3></div>
        <Form onSubmit={handleSubmit(onSubmit)} autoComplete='off'>
          <Row>
            <Col lg={6}>
              <FormGroup className='form-group'>
                <FormControlComponent
                  type={"text"}
                  id={"company_name"}
                  name='company_name'
                  placeHolder='Enter your company name *'
                  register={register}
                  errors={errors}
                  disabled={companyDisabledScope(router)}
                />
                <Form.Control.Feedback type='invalid'>
                  {errors.company_name?.message?.toString()}
                </Form.Control.Feedback>
              </FormGroup>
            </Col>
            <Col lg={6}>
              <FormGroup className='form-group'>
                <FormControlComponent
                  type={"email"}
                  id={"email"}
                  name='email'
                  placeHolder='Enter your email *'
                  register={register}
                  errors={errors}
                  disabled={companyDisabledScope(router)}
                />
                <Form.Control.Feedback type='invalid'>
                  {errors.email?.message?.toString()}
                </Form.Control.Feedback>
              </FormGroup>
            </Col>
          </Row>

          <Row>
            <Col lg={6}>
              <FormGroup className='form-group'>
                <div className='address-autocomplete-parent'>
                  <FormControl
                    {...register("company_address")}
                    className={companyAddClassName(errors, customeAddressError)}
                    id='origin_destination'
                    placeholder='Company address'
                    autoComplete='off'
                    onInput={(e) => {
                      e.preventDefault();
                      getAddressSuggestions(e);
                    }}
                    value={selectedOriginDestination}
                    onChange={(e) => {
                      setSelectedOriginDestination(e.target.value);
                      setValue("city", "");
                      setValue("state", "");
                    }}
                    disabled={companyDisabledScope(router)}
                  />
                  <div className={addressClassname(searchedSuggestions)}>
                    <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>
                  <Form.Control.Feedback type='invalid'>
                    {errors.company_address?.message?.toString() ??
                      customeAddressError}
                  </Form.Control.Feedback>
                  <div className='mt-2 multiple-location' >
                    <h6  >
                      Note: Please provide the full physical address for your
                      office as it is common for drayage carriers to have
                      multiple locations.
                    </h6>
                  </div>
                </div>
              </FormGroup>
            </Col>
            <Col lg={6}>
              <FormGroup className='form-group'>
                <FormControlComponent
                  type={"text"}
                  id={"first_name"}
                  placeHolder='Enter your first name *'
                  register={register}
                  errors={errors}
                />
                <Form.Control.Feedback type='invalid'>
                  {errors.first_name?.message?.toString()}
                </Form.Control.Feedback>
              </FormGroup>
            </Col>
          </Row>
          <Row>
            <Col lg={6}>
              <FormGroup className='form-group'>
                <FormControlComponent
                  type={"text"}
                  id={"last_name"}
                  placeHolder='Enter your last name *'
                  register={register}
                  errors={errors}
                />
                <Form.Control.Feedback type='invalid'>
                  {errors.last_name?.message?.toString()}
                </Form.Control.Feedback>
              </FormGroup>
            </Col>
            <Col lg={6}>
              <FormGroup className='form-group'>
                <FormControlComponent
                  type={"text"}
                  id={"company_website"}
                  placeHolder='Company website'
                  register={register}
                  errors={errors}
                />
                <Form.Control.Feedback type='invalid'>
                  {errors.company_website?.message?.toString()}
                </Form.Control.Feedback>
              </FormGroup>
            </Col>
          </Row>
          <Row>
            <Col lg={6}>
              <FormGroup className='form-group'>
                <FormControlComponent
                  type={"text"}
                  id={"scac_code"}
                  placeHolder='SCAC CODE'
                  register={register}
                  errors={errors}
                />
                <Form.Control.Feedback type='invalid'>
                  {errors.scac_code?.message?.toString()}
                </Form.Control.Feedback>
              </FormGroup>
            </Col>
            <Col lg={6}>
              <FormGroup className='form-group'>
                <FormControlComponent
                  type={"text"}
                  disabled
                  id={"city"}
                  placeHolder='city'
                  register={register}
                  errors={errors}
                />
                <Form.Control.Feedback type='invalid'>
                  {errors.city?.message?.toString()}
                </Form.Control.Feedback>
              </FormGroup>
            </Col>
          </Row>
          <Row>
            <div style={{ display: "flex", gap: "10px" }}>
              <div className='form-check'>
                <input
                  disabled={companyDisabledScope(router)}
                  className='form-check-input'
                  type='radio'
                  name='flexRadioDefault'
                  id='flexRadioDefault1'
                  checked={selectedOption === "MC"}
                  onChange={() => handleRadioChange("MC")}
                />
                <label className='form-check-label' htmlFor='flexRadioDefault1'>
                  MC
                </label>
              </div>
              <div className='form-check'>
                <input
                  className='form-check-input'
                  type='radio'
                  disabled={companyDisabledScope(router)}
                  name='flexRadioDefault'
                  id='flexRadioDefault2'
                  checked={selectedOption === "DOT"}
                  onChange={() => handleRadioChange("DOT")}
                />
                <label className='form-check-label' htmlFor='flexRadioDefault2'>
                  DOT
                </label>
              </div>
            </div>

            {selectedOption === "MC" && (
              <Col lg={6}>
                <FormGroup className='form-group'>
                  <div style={{ position: "relative" }}>
                    <FormControl
                      {...register("MC", {
                        onChange: (e) => {
                          handleVerifiedMc(e);
                        },
                      })}
                      type={"text"}
                      id={"MC"}
                      disabled={companyDisabledScope(router)}
                      placeholder='Enter MC number'
                    />
                    <p className='dot_msg error_msg_style'>
                      {errors.MC?.message?.toString()}
                    </p>

                    {mcNumberLoading ? (
                      <div
                        style={{
                          position: "absolute",
                          right: "10px",
                          top: "50%",
                          transform: "translateY(-50%)",
                        }}
                      >
                        <div className='loader'>
                          <div className='circle'></div>
                          <div className='checkmark draw'></div>
                        </div>
                      </div>
                    ) : (
                      checkmc()
                    )}
                  </div>
                </FormGroup>
              </Col>
            )}

            {selectedOption === "DOT" &&
              selectedOptionModule(
                register,
                handleVerified,
                router,
                errors,
                dotNumberLoading,
                checkDot
              )}
            <Col lg={6}>
              <FormGroup className='form-group'>
                <FormControlComponent
                  type={"text"}
                  disabled
                  id={"state"}
                  placeHolder='state'
                  register={register}
                  errors={errors}
                />
                <Form.Control.Feedback type='invalid'>
                  {errors.state?.message?.toString()}
                </Form.Control.Feedback>
              </FormGroup>
            </Col>
          </Row>
          <Row>
            <Col lg={6}>
              <FormGroup className='form-group'>
                <FormControl
                  type={"tel"}
                  {...register("phone")}
                  id={"phone"}
                  disabled={phoneDisableMod(router)}
                  placeholder='Enter your phone (Ex: (xxx) xxx-xxxx)'
                  autoComplete='off'
                  value={formattedPhone}
                  onChange={handlePhoneChange}
                  className={phoneModClassScope(errors)}
                />
                <Form.Control.Feedback type='invalid'>
                  {errors.phone?.message?.toString()}
                </Form.Control.Feedback>
              </FormGroup>
            </Col>
            <Col lg={6}>
              <FormGroup className='form-group'>
                <FormControlComponent
                  type={"text"}
                  id={"driver_total"}
                  disabled
                  name='driver_total'
                  placeHolder='Driver Total'
                  register={register}
                  errors={errors}
                />
                <Form.Control.Feedback type='invalid'>
                  {errors.driver_total?.message?.toString()}
                </Form.Control.Feedback>
              </FormGroup>
            </Col>
          </Row>
          <Row>
            <Col lg={6}>
              <FormGroup className='form-group'>
                <FormControlComponent
                  type={"text"}
                  disabled
                  id={"legal_name"}
                  placeHolder='legal name'
                  register={register}
                  errors={errors}
                />
              </FormGroup>
            </Col>
            <Col lg={6}>
              <FormGroup className='form-group'>
                <FormControlComponent
                  type={"text"}
                  disabled
                  id={"dba"}
                  placeHolder='dba name'
                  register={register}
                  errors={errors}
                />
                <Form.Control.Feedback type='invalid'>
                  {errors.dba?.message?.toString()}
                </Form.Control.Feedback>
              </FormGroup>
            </Col>
          </Row>
          <Row>
            <Col lg={6}>
              <FormGroup className='form-group'>
                <FormControlComponent
                  type={"text"}
                  disabled
                  id={"power_unit_total"}
                  placeHolder='Power Unit'
                  register={register}
                  errors={errors}
                />
                <Form.Control.Feedback type='invalid'>
                  {errors.power_unit_total?.message?.toString()}
                </Form.Control.Feedback>
              </FormGroup>
            </Col>
            <Col lg={6}>
              <FormGroup className='form-group'>
                <FormControlComponent
                  type={"text"}
                  id={"entity_type"}
                  disabled
                  placeHolder='entity type'
                  register={register}
                  errors={errors}
                />
                <Form.Control.Feedback type='invalid'>
                  {errors.entity_type?.message?.toString()}
                </Form.Control.Feedback>
              </FormGroup>
            </Col>
          </Row>

          <Row>
            <Col lg={6}>
              <FormGroup className='form-group'>
                <div className='statespan'>
                  <Controller
                    name='selectedStateOptions'
                    control={control}
                    render={({ field }) => (
                      <MultiSelect
                        display='chip'
                        options={states}
                        disabled={statesDisabledMod(router)}
                        value={selectedStateOptions}
                        onChange={(e) => {
                          field.onChange(e.value);
                          handleSelectStateChange(e, field.value);
                        }}
                        optionLabel='state_name'
                        className={statesClassnameModScope(errors)}
                        placeholder='Select State/Province'
                        onShow={onShow}
                      />
                    )}
                  />
                  <p className='invalid-feedback'>
                    {errors.selectedStateOptions?.message}
                  </p>
                </div>
              </FormGroup>
            </Col>
            <Col lg={6}>
              <FormGroup className='form-group'>
                <div className='marketspan'>
                  <Controller
                    name='selectedMarkets'
                    control={control}
                    render={({ field }) => (
                      <MultiSelect
                        disabled={router?.query?.parent_details ? true : false}
                        display='chip'
                        options={marketName}
                        value={selectedMarkets}
                        onChange={(e) => {
                          field.onChange(e.value);
                          handleSelectMarketChange(e);
                        }}
                        optionLabel='market'
                        className={`form-control ${errors.selectedMarkets ? "is-invalid" : ""}`}
                        placeholder='Select Market'
                        onShow={onShow}
                      />
                    )}
                  />
                  <p className='invalid-feedback'>
                    {errors.selectedMarkets?.message}
                  </p>
                </div>
              </FormGroup>
            </Col>

            <Col lg={6}>
              <FormGroup className='form-group'>
                <div className='teminalspan'>
                  <Controller
                    name='selectedTerminalOptions'
                    control={control}
                    render={({ field }) => (
                      <MultiSelect
                        disabled={router?.query?.parent_details ? true : false}
                        display='chip'
                        options={terminalName}
                        value={selectedTerminalOptions}
                        onChange={(e) => {
                          field.onChange(e.value);
                          handleSelectTerminalChange(e);
                        }}
                        optionLabel='name'
                        className={`form-control ${errors.selectedTerminalOptions ? "is-invalid" : ""}`}
                        placeholder='Select Terminal'
                        onShow={onShow}
                      />
                    )}
                  />
                  <p className='invalid-feedback'>
                    {errors.selectedTerminalOptions?.message}
                  </p>
                </div>
              </FormGroup>
            </Col>
            <Col lg={6}>
              <span>Draydex Email Invite </span>
              <FormGroup className='form-group'>
                <FormControlComponent
                  type={"email"}
                  id={"invite_client_email"}
                  placeHolder='Enter your invite email*'
                  register={register}
                  errors={errors}
                />
                <Form.Control.Feedback type='invalid'>
                  {errors.invite_client_email?.message?.toString()}
                </Form.Control.Feedback>
              </FormGroup>
            </Col>
          </Row>

          <Row className='justify-content-center my-3 px-3'>
          <div className="end-save-icon">
            <button
              type='submit'
               className='btn btn-primary  divStylecss-update'
              disabled={buttonDisable || dotDisable || mcDisable}
            >
              {submitButtonText()}
            </button>
            </div>
          </Row>
        </Form>
      </Row>
      <Modal
        backdrop='static'
        keyboard={false}
        className='register_modal'
        show={showRegisterPopup}
        onHide={toggleRegisterPopup}
      >
        <Modal.Header>
          <Modal.Title>Claim User</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <p className='justify-content-center registrationText'>
          Do you want to Claim this user?
          </p>
          <div className='reg_button'>
            <Button
              variant='danger'
              className='mx-2 customerButton'
              onClick={() => {
                toggleRegisterPopup();
              }}
            >
              Skip
            </Button>
            <Button
              variant='success'
              className='mx-2 carrierButton'
              onClick={() => {
                setShowClaimPopup(true);
                setShowRegisterPopup(false);
              }}
            >
              Claim
            </Button>
          </div>
        </Modal.Body>
      </Modal>
      <Modal
        backdrop='static'
        keyboard={false}
        className='tabel_modal'
        show={showClaimPopup}
        onHide={toggleClaimPopup}
      >
        <div className='Cross-reg'>
          <i onClick={toggleClaimPopup} className='bi bi-x Cross-reg-x'></i>
        </div>
        <table className='table align-middle mb-0 bg-white'>
          <thead className='bg-light'>
            <tr>
              <th>Name</th>
              <th>Company</th>
              <th>Dot</th>
              <th>Claim Account</th>
            </tr>
          </thead>
          <tbody>
            {ClaimListing?.map((item) => (
              <>
                <tr>
                  <td>
                    <div className='d-flex align-items-center'>
                      <div className=''>
                        <p className='fw-bold mb-1'>{item?.name}</p>
                      </div>
                    </div>
                  </td>
                  <td>
                    <p className='fw-normal mb-1'>{item?.billing_company}</p>
                  </td>
                  <td>
                    <span className=''>{item?.dot_number}</span>
                  </td>
                  <td>
                    <button
                      onClick={() => {
                        setSendEmail(true);
                        setShowClaimPopup(false);
                        setClaimID(item?.user_id);
                      }}
                      type='button'
                      className='btn btn-danger'
                    >
                      Claim
                    </button>
                  </td>
                </tr>
              </>
            ))}
          </tbody>
        </table>
      </Modal>
      <Modal
        show={SendEmail}
        onHide={toggleEmailPopup}
        backdrop='static'
        keyboard={false}
      >
        <div
          id='exampleModal'
          className='edit_modal'
          tabindex='-1'
          role='dialog'
          aria-labelledby='exampleModalLabel'
          aria-hidden='true'
        >
          <div className='modal-dialog' role='document'>
            <div className='modal-content'>
              <div className='modal-header'>
                <h5 className='modal-title' id='exampleModalLabel'>
                  Claim Users
                </h5>
              </div>
              <div className='modal-body'>
                <form>
                  <div className='form-group'>
                    <label for='recipient-name' className='col-form-label'>
                      Email:
                    </label>
                    <input
                      value={claimedEmail}
                      onChange={(e) => FinalClaim(e)}
                      name='email'
                      type='text'
                      className='form-control'
                      id='recipient-name'
                    />
                  </div>
                </form>
              </div>
              <div className='modal-footer'>
                <button
                  type='button'
                  className='btn btn-secondary'
                  data-dismiss='modal'
                  onClick={() => setSendEmail(false)}
                >
                  Close
                </button>
                <button
                  type='button'
                  className='btn btn-primary'
                  onClick={() => UserClaim()}
                >
                  Claim
                </button>
              </div>
            </div>
          </div>
        </div>
      </Modal>
    </>
  );
}

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

function statesDisabledMod(router: any): boolean | undefined {
  return router?.query?.parent_details ? true : false;
}

function phoneModClassScope(errors: any): string | undefined {
  return errors.phone && "is-invalid";
}

function phoneDisableMod(router: any): boolean | undefined {
  return router?.query?.parent_details ? true : false;
}

function addressClassname(searchedSuggestions: never[]): string | undefined {
  return searchedSuggestions.length < 1 ? "d-none" : "";
}

function companyAddClassName(
  errors: any,
  customeAddressError: string
): string | undefined {
  return (errors.company_address || customeAddressError) && "is-invalid";
}

async function signUpModScope({
  setButtonDisable,
  data,
  RouterAddress,
  zipCodeMatch,
  inviteId,
  selectedStateOptions,
  selectedMarkets,
  selectedTerminalOptions,
  FormState,
  RouterState,
  FormCity,
  RouterCity,
  dbaName,
  totalDrivers,
  legalName,
  totalPowerUnits,
  brokerAuthorityStatus,
  handleResponse,
  fmcsaDot,
  fmcsaMc
}: {
  setButtonDisable: React.Dispatch<React.SetStateAction<boolean>>;
  data: any;
  RouterAddress: undefined;
  zipCodeMatch: RegExpMatchArray | null;
  inviteId: undefined;
  selectedStateOptions: never[];
  selectedMarkets: null;
  selectedTerminalOptions: null;
  FormState: undefined;
  RouterState: undefined;
  FormCity: undefined;
  RouterCity: undefined;
  dbaName: string;
  totalDrivers: undefined;
  legalName: string;
  totalPowerUnits: undefined;
  brokerAuthorityStatus: string;
  handleResponse: (response: any) => void;
  fmcsaDot:any;
    fmcsaMc: any;
}) {
  try {
    setButtonDisable(true);
    const response = await responseModScope({
      data,
      RouterAddress,
      zipCodeMatch,
      inviteId,
      selectedStateOptions,
      selectedMarkets,
      selectedTerminalOptions,
      FormState,
      RouterState,
      FormCity,
      RouterCity,
      dbaName,
      totalDrivers,
      legalName,
      totalPowerUnits,
      brokerAuthorityStatus,
      fmcsaDot,
      fmcsaMc
    });

    handleResponse(response);
  } catch (error) {
    toastFy(error);
  }
}

function submitConditonalError(error: unknown) {
  toast.error(error.message, {
    position: toast.POSITION.TOP_CENTER,
  });
}

function submitConditonalPayload(data: any) {
  return {
    billing_company: data?.company_name,
    dot_number: data?.dot_number,
    address: data?.company_address,
  };
}

function submitConditonalStates({
  setAddressVerify,
  datas,
  setPasswordVerify,
  setButtonDisable,
  setClaimedEmail,
  setFmcsaData,
  dbaName,
  totalDrivers,
  legalName,
  totalPowerUnits,
  brokerAuthorityStatus,
}: {
  setAddressVerify: React.Dispatch<React.SetStateAction<undefined>>;
  datas: any;
  setPasswordVerify: React.Dispatch<React.SetStateAction<undefined>>;
  setButtonDisable: React.Dispatch<React.SetStateAction<boolean>>;
  setClaimedEmail: React.Dispatch<React.SetStateAction<string | undefined>>;
  setFmcsaData: React.Dispatch<React.SetStateAction<{}>>;
  dbaName: string;
  totalDrivers: undefined;
  legalName: string;
  totalPowerUnits: undefined;
  brokerAuthorityStatus: string;
}) {
  setAddressVerify(datas?.company_address);
  setPasswordVerify(datas?.password);
  setButtonDisable(true);
  setClaimedEmail(datas?.email);
  setFmcsaData({
    dbaName: dbaName,
    totalDrivers: totalDrivers,
    legalName: legalName,
    dot_number: datas.dot_number,
    mc_number: datas.MC,
    totalPowerUnits: totalPowerUnits,
    brokerAuthorityStatus: brokerAuthorityStatus,
  });
}

function validatorCheck(
  router:any,
  dotMc: string,
  check:any
): {
  register: any;
  handleSubmit: any;
  setValue: any;
  control: any;
  formState: any;
  reset: any;
} {
  const { object, string, array } = Yup;

  return useForm({
    resolver: yupResolver(
      object().shape({
        ...(!router?.query?.parent_details
          ? {
              company_name: string()
                .required("Company name is required")
                .max(100, 'Company name cannot exceed 100 characters'),
              email: string()
                .required("Email is required")
                .matches(
                  /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/,
                  "Please enter a valid email address"
                ),
              company_address: string().required("Address is required"),
              invite_client_email: string()
                .required("Invite Email Is Required")
                .matches(
                  /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/,
                  "Please enter a valid email address"
                ),
              first_name: string().max(40).required("First name is required"),
              scac_code: string("")
                .max(10,"scac code must be at most 10 characters")
                .required("The scac code value is required."),
              last_name: string().max(40).required("Last name is required"),
              dot_number: string().test(
                "dotMc-validation",
                "Dot number is required",
                function (value) {
                  if (dotMc === "DOT") {
                    return value && value.length >= 5;
                  }
                  return true;
                }
              ),
              MC: string().test(
                "dotMc-validation",
                "MC number is requied",
                function (value) {
                  if (dotMc === "MC") {
                    return value && value.length >= 5;
                  }
                  return true;
                }
              ),
              phone: string()
              .test(
                "len",
                "Phone number must be 10 digits",
                (val) => {
                  const cleaned = val.replace(/\D/g, "");
                  return cleaned.length === 10; 
                }
              ),
              state: string().nullable(),
              city: string().nullable(),
              selectedStateOptions: array()
                .required("State is required")
                .min(1, "Select at least one state"),
              selectedMarkets: array(),
              selectedTerminalOptions: array(),
            }
          : {
              first_name: string()
                .max(40)
                .required("The first name value is required."),
              company_website: string()
                .max(40)
                .required("The company website value is required."),
            scac_code: string("")
              .max(10, "scac code must be at most 10 characters")
              .required("The scac code value is required."),
              last_name: string()
                .max(40)
                .required("The last name value is required."),
            }),
      })
    ),
  });
}

function claimMod12(
  claimData: {
    claimedEmail: string | undefined;
    claimId: number | undefined;
    PasswordVerify: undefined;
    AddressVerify: undefined;
    fmcsaData: {};
  },
  actions: {
    setSendEmail: React.Dispatch<React.SetStateAction<boolean>>;
    reset: Function;
    setClaimedEmail: React.Dispatch<React.SetStateAction<string | undefined>>;
    setSelectedOriginDestination: React.Dispatch<React.SetStateAction<string>>;
    setPasswordVerify: React.Dispatch<React.SetStateAction<undefined>>;
    setAddressVerify: React.Dispatch<React.SetStateAction<undefined>>;
    setFormattedPhone: React.Dispatch<React.SetStateAction<string>>;
    setDotNumberLoading: React.Dispatch<React.SetStateAction<boolean>>;
    setDotNumber: React.Dispatch<React.SetStateAction<undefined>>;
  },
  router: any
) {
  const UserClaim = async (i: any) => {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

    if (!claimData.claimedEmail || !emailRegex.test(claimData.claimedEmail)) {
      toast.error("Please enter a valid email address", {
        position: toast.POSITION.TOP_CENTER,
      });
      return;
    }

    const payload = {
      user_id: claimData.claimId,
      email: claimData.claimedEmail,
      password: claimData.PasswordVerify,
      address: claimData.AddressVerify,
      fmcsa_data: claimData.fmcsaData,
    };

    let res = await ClaimUsersEmail(payload);
    if (res?.status === "success") {
      toast.success(res?.message, {
        position: toast.POSITION.TOP_CENTER,
      });
      actions.setSendEmail(false);
      actions.reset();
      actions.setClaimedEmail("");
      actions.setSelectedOriginDestination("");
      actions.setPasswordVerify("");
      actions.setAddressVerify("");
      actions.setFormattedPhone("");
      actions.setDotNumberLoading(false);
      actions.setDotNumber(false);
      setTimeout(() => {
        router.push("/login");
      }, 2000);
    }
  };

  const FinalClaim = (e: any) => {
    actions.setClaimedEmail(e?.target?.value);
  };

  return { FinalClaim, UserClaim };
}

function toggleMod(
  setShowRegisterPopup: React.Dispatch<React.SetStateAction<boolean>>,
  setShowClaimPopup: React.Dispatch<React.SetStateAction<boolean>>,
  setSendEmail: React.Dispatch<React.SetStateAction<boolean>>
) {
  const toggleRegisterPopup = () => {
    setShowRegisterPopup((prev) => !prev);
  };
  const toggleClaimPopup = () => {
    setShowClaimPopup((prev) => !prev);
  };
  const toggleEmailPopup = () => {
    setSendEmail((prev) => !prev);
  };
  return { toggleRegisterPopup, toggleClaimPopup, toggleEmailPopup };
}

function checkFmcsaMod(dotNumber: undefined, mcNumber: undefined) {
  const checkDot = () => {
    if (dotNumber === true) {
      return checkDotMod;
    }
  };
  const checkmc = () => {
    if (mcNumber === true) {
      return checkmcMod();
    }
  };
  return { checkmc, checkDot };
}

function selectedOptionModule(
  register,
  handleVerified: (event: { target: { value: any } }) => Promise<void>,
  router,
  errors,
  dotNumberLoading: boolean,
  checkDot: () => JSX.Element | undefined
): React.ReactNode {
  return (
    <Col lg={6}>
      <FormGroup className='form-group'>
        <div style={{ position: "relative" }}>
          <FormControl
            {...register("dot_number", {
              onChange: (e) => {
                handleVerified(e);
              },
            })}
            disabled={companyDisabledScope(router)}
            type={"text"}
            id={"dot_number"}
            placeholder='Enter DOT number'
          />
          <p className='dot_msg error_msg_style'>
            {errors.dot_number?.message?.toString()}
          </p>

          {dotNumberLoading ? (
            <div
              style={{
                position: "absolute",
                right: "10px",
                top: "50%",
                transform: "translateY(-50%)",
              }}
            >
              <div className='loader'>
                <div className='circle'></div>
                <div className='checkmark draw'></div>
              </div>
            </div>
          ) : (
            checkDot()
          )}
        </div>
      </FormGroup>
    </Col>
  );
}

function toastFy(error: unknown) {
  toast.error(error?.message, {
    position: toast.POSITION.TOP_CENTER,
  });
}

function claimUserMod1(
  setClaimListing: React.Dispatch<React.SetStateAction<any[] | undefined>>,
  res: any,
  setShowRegisterPopup: React.Dispatch<React.SetStateAction<boolean>>,
  setButtonDisable: React.Dispatch<React.SetStateAction<boolean>>
) {
  setClaimListing(res?.data);

  toast.error("A Client with similar details already exists. Please check!", {
    position: toast.POSITION.TOP_CENTER,
  });
  setButtonDisable(false);
}

function statesMod4(
  response: any,
  setStates: React.Dispatch<React.SetStateAction<never[]>>
) {
  if (response?.status == "success") {
    setStates(response?.data);
  } else {
    setStates(null);
  }
}

function checkmcMod() {
  return (
    <div
      style={{
        position: "absolute",
        right: "10px",
        top: "50%",
        transform: "translateY(-50%)",
      }}
    >
      <Image width={20} height={20} src={"/images/tick.jpeg"} alt={""} />
    </div>
  );
}

async function responseModScope({
  data,
  RouterAddress,
  zipCodeMatch,
  inviteId,
  selectedStateOptions,
  selectedMarkets,
  selectedTerminalOptions,
  FormState,
  RouterState,
  FormCity,
  RouterCity,
  dbaName,
  totalDrivers,
  legalName,
  totalPowerUnits,
  brokerAuthorityStatus,
  fmcsaDot,
  fmcsaMc
}: {
  data: any;
  RouterAddress: undefined;
  zipCodeMatch: RegExpMatchArray | null;
  inviteId: undefined;
  selectedStateOptions: never[];
  selectedMarkets: null;
  selectedTerminalOptions: null;
  FormState: undefined;
  RouterState: undefined;
  FormCity: undefined;
  RouterCity: undefined;
  dbaName: string;
  totalDrivers: undefined;
  legalName: string;
  totalPowerUnits: undefined;
  brokerAuthorityStatus: string;
  fmcsaDot:any
  fmcsaMc:any
}) {
  return clientCreate({
    client_type: "carrier",
    company_name: data.company_name,
    email: data.email,
    address: data.company_address || RouterAddress,
    name: `${data.first_name} ${data.last_name}`,
    website: data.company_website,
    scac_code: data.scac_code,
    dot_number: data.dot_number || fmcsaDot,
    mc_number: data.MC || fmcsaMc,
    phone: data.phone.replace(/\D/g, ""),
    state: data.state,
    city: data.city,
    zip_code: zipCodeMatch ? zipCodeMatch[0] : "",
    password: data.password,
    parent_id: inviteId,
    state: selectedStateOptions?.map((state) => state?.state_code),
    market: selectedMarkets?.map((state: { market: any }) => state?.market),
    terminal_id: selectedTerminalOptions?.map(
      (state: { id: any }) => state?.id
    ),
    from_state: data?.state,
    invite_client_email: data?.invite_client_email,
    fmcsa_data: {
      dbaName: dbaName,
      totalDrivers: totalDrivers,
      legalName: legalName,
      dot_number: data.dot_number || fmcsaDot,
      mc_number: data.MC || fmcsaMc,
      totalPowerUnits: totalPowerUnits,
      brokerAuthorityStatus: brokerAuthorityStatus,
    },
  });
}

function bindSelectedAddressMod(
  setValue,
  item,
  formState,
  setSearchSuggestions,
  setSelectedOriginDestination,
  setCustomeAddressError,
  setFormCityAndState
) {
  const { name, city, state } = item;

  setValue("company_address", name);
  formState.errors.company_address = undefined;
  setSearchSuggestions([]);
  setSelectedOriginDestination(name);
  setCustomeAddressError("");
  setValue("city", city);
  setValue("state", state);

  setFormCityAndState({ city, state });
}

function handleSelectMarketChangeMod(
  selectedTerminalOptions: any,
  setSelectedMarkets: React.Dispatch<React.SetStateAction<null>>,
  e: MultiSelectChangeEvent,
  getTerminalData: (payload?: any) => void,
  setSelecteTerminalOptions: React.Dispatch<React.SetStateAction<null>>,
  setTerminalName: React.Dispatch<React.SetStateAction<never[]>>
) {
  setSelectedMarkets(e?.target?.value);
  if (e.target.value.length > 0) {
    const MarketName = e.target.value;
    const marketCodes = MarketName.map(
      (state: { market: any }) => state?.market
    );
    if (Array.isArray(selectedTerminalOptions)) {
      const dataObj: any = selectedTerminalOptions.filter((terminal: { market: any }) =>
        marketCodes.includes(terminal.market)
      );
      setSelecteTerminalOptions(dataObj);
    }
    const payload = {
      market: marketCodes,
    };
    getTerminalData(payload);
  } else {
    setSelecteTerminalOptions(null);
    setTerminalName([]);
  }
}

function submitButtonTextMod(buttonDisable: boolean) {
  let buttonText: any = "Save";
  if (buttonDisable) {
    buttonText = (
      <>
        <span
          className='spinner-border spinner-border-sm '
          role='status'
          aria-hidden='true'
        ></span>{" "}
        Please wait...{" "}
      </>
    );
  }
  return buttonText;
}
interface VerifiedMcParams {
  setValue: any;
  setmcNumberLoading: any;
  setDbaName: any;
  setTotalDrivers: any;
  setLegalName: any;
  setTotalPowerUnits: any;
  setBrokerAuthorityStatus: any;
  setMcDisable: any;
  setmcNumber: any;
  errors: any;
}

async function handleVerifiedMcMod({
  setValue,
  event,
  setmcNumberLoading,
  setDbaName,
  setTotalDrivers,
  setLegalName,
  setTotalPowerUnits,
  setBrokerAuthorityStatus,
  setMcDisable,
  setmcNumber,
  errors,
  SetFmcsaDot,
}: {
  setValue;
  event;
  setmcNumberLoading;
  setDbaName;
  setTotalDrivers;
  setLegalName;
  setTotalPowerUnits;
  setBrokerAuthorityStatus;
  setMcDisable;
  setmcNumber;
  errors;
    SetFmcsaDot;
}) {
  // Function to reset form values
  await verifiedmodMcMod({
    setValue,
    setmcNumberLoading,
    setDbaName,
    setTotalDrivers,
    setLegalName,
    setTotalPowerUnits,
    setBrokerAuthorityStatus,
    setMcDisable,
    setmcNumber,
    errors,
    event,
    SetFmcsaDot,
  });
}

async function verifiedmodMcMod({
  setValue,
  setmcNumberLoading,
  setDbaName,
  setTotalDrivers,
  setLegalName,
  setTotalPowerUnits,
  setBrokerAuthorityStatus,
  setMcDisable,
  setmcNumber,
  errors,
  event,
  SetFmcsaDot,
}: {
  setValue: any;
  setmcNumberLoading: any;
  setDbaName: any;
  setTotalDrivers: any;
  setLegalName: any;
  setTotalPowerUnits: any;
  setBrokerAuthorityStatus: any;
  setMcDisable: any;
  setmcNumber: any;
  errors: any;
  event: any;
    SetFmcsaDot;
}) {
  const resetFormValuesdata = () => {
    setValue("entity_type", "");
    setValue("driver_total", "");
    setValue("legal_name", "");
    setValue("dba", "");
    setValue("power_unit_total", "");
  };

  // Function to handle MC number verification
  const handleMcVerification = async (mcNumber) => {
    setmcNumberLoading(true);
    await handleMcVerificationErrHandle(
      mcNumber,
      handleMcVerificationSuccess,
      handleMcVerificationError,
      setmcNumberLoading
    );
  };

  // Function to handle success response from MC verification
  const handleMcVerificationSuccess = (res) => {
    let Dotdata = res?.content?.[0]?.carrier || {};
    SetFmcsaDot(Dotdata?.dotNumber)
    handleMcVerifyMod32(
      setDbaName,
      Dotdata,
      setTotalDrivers,
      setLegalName,
      setTotalPowerUnits,
      setBrokerAuthorityStatus
    );

    setValue(
      "entity_type",
      Dotdata?.brokerAuthorityStatus === "A" &&
        Dotdata?.totalPowerUnits === null
        ? "BROKER"
        : "CARRIER"
    );
    setValue("driver_total", Dotdata?.totalDrivers || "N/A");
    setValue("legal_name", Dotdata?.legalName || "N/A");
    setValue("dba", Dotdata?.dbaName || "N/A");
    setValue("power_unit_total", Dotdata?.totalPowerUnits || "N/A");

    const isMcVerified = !!res?.content && res?.status_code !== 500;
    setMcDisable(!isMcVerified);
    setmcNumber(isMcVerified);
    errors["MC"] = isMcVerified
      ? { message: "" }
      : { message: "MC Number not Verified" };
  };

  // Function to handle error from MC verification
  const handleMcVerificationError = (error) => {
    console.error("Error verifying MC number:", error);
    setMcDisable(true);
    setmcNumber(false);
    errors["MC"] = { message: "MC Number verification failed" };
  };

  // Reset form values initially
  resetFormValuesdata();

  // Check input length and trigger MC verification
  const inputValueLength = event?.target?.value?.length || 0;
  if (inputValueLength >= 5) {
    await handleMcVerification(event.target.value);
  } else if (inputValueLength === 0) {
    setmcNumber(false);
  }
}

async function handleMcVerificationErrHandle(
  mcNumber: any,
  handleMcVerificationSuccess: (res: any) => void,
  handleMcVerificationError: (error: any) => void,
  setmcNumberLoading: any
) {
  try {
    let res = await McVerify(mcNumber);
    handleMcVerificationSuccess(res);
  } catch (error) {
    handleMcVerificationError(error);
  } finally {
    setmcNumberLoading(false);
  }
}

function handleMcVerifyMod32(
  setDbaName: any,
  Dotdata: any,
  setTotalDrivers: any,
  setLegalName: any,
  setTotalPowerUnits: any,
  setBrokerAuthorityStatus: any
) {
  setDbaName(Dotdata?.dbaName || "");
  setTotalDrivers(Dotdata?.totalDrivers || 0);
  setLegalName(Dotdata?.legalName || "");
  setTotalPowerUnits(Dotdata?.totalPowerUnits || 0);
  setBrokerAuthorityStatus(Dotdata?.brokerAuthorityStatus || "N");
}

async function handleVerifiedMod({
  setValue,
  event,
  setDotNumberLoading,
  setDbaName,
  setTotalDrivers,
  setLegalName,
  setTotalPowerUnits,
  setBrokerAuthorityStatus,
  setDotDisable,
  errors,
  setDotNumber,
  setFmcsaMc,
}) {
  const handleDotVerification = async (dotNumber) => {
    setDotNumberLoading(true);
    try {
      const res = await dotVerify(dotNumber);
      const res1 = await McFmcVerify(dotNumber); 
      const Dotdata = res?.content?.carrier || {};
      setFmcsaMc(res1?.content[0]?.docketNumber);
      setDbaName(Dotdata?.dbaName || "");
      setTotalDrivers(Dotdata?.totalDrivers);
      setLegalName(Dotdata?.legalName);
      setTotalPowerUnits(Dotdata?.totalPowerUnits);
      setBrokerAuthorityStatus(Dotdata?.brokerAuthorityStatus);

      setValue(
        "entity_type",
        Dotdata?.brokerAuthorityStatus === "A" && Dotdata?.totalPowerUnits === null
          ? "BROKER"
          : "CARRIER"
      );
      setValue("driver_total", Dotdata?.totalDrivers || "N/A");
      setValue("legal_name", Dotdata?.legalName || "N/A");
      setValue("dba", Dotdata?.dbaName || "N/A");
      setValue("power_unit_total", Dotdata?.totalPowerUnits || "N/A");

      const isDotVerified = !!res?.content && res?.status_code !== 500;
      setDotDisable(!isDotVerified);
      errors["dot_number"] = isDotVerified
        ? { message: "" }
        : { message: "DOT Number not Verified" };
      setDotNumber(isDotVerified);
    } catch (error) {
      console.error("Error verifying DOT number:", error);
      setDotDisable(true);
      errors["dot_number"] = { message: "DOT Number verification failed" };
      setDotNumber(false);
    } finally {
      setDotNumberLoading(false);
    }
  };

  // Reset values before verification
  setValue("entity_type", "");
  setValue("driver_total", "");
  setValue("legal_name", "");
  setValue("dba", "");
  setValue("power_unit_total", "");

  await handleVerifiedMod22(event, handleDotVerification, setDotNumber);
}


async function handleVerifiedMod22(
  event: any,
  handleDotVerification: (dotNumber: any) => Promise<void>,
  setDotNumber: any
) {
  const inputValueLength = event?.target?.value?.length || 0;
  if (inputValueLength >= 5) {
    await handleDotVerification(event.target.value);
  } else {
    setDotNumber(false);
  }
}

function handlePhoneChangeMod(
  event: { target: { value: any } },
  setFormattedPhone: React.Dispatch<React.SetStateAction<string>>
) {
  let inputValue = event.target.value;
  const cleanedInput = inputValue.replace(/\D/g, "");
  const formattedNumber = cleanedInput.replace(
    /(\d{3})(\d{3})(\d{4})/,
    "$1-$2-$3"
  );

  setFormattedPhone(formattedNumber);
}

function effectMod({
  router,
  setSelectedOption,
  setRouterAddress,
  setInviteId,
  setValue,
  setFormattedPhone,
  setSelectedOriginDestination,
  setRouterState,
  setRouterCity,
  getTerminalData,
  terminalName,
  states,
  getMarketData,
  marketName,
  setSelectedMarkets,
  setSelecteTerminalOptions,
  setSelecteStatedOptions,
}: {
  router;
  setSelectedOption: React.Dispatch<React.SetStateAction<string>>;
  setRouterAddress: React.Dispatch<React.SetStateAction<undefined>>;
  setInviteId: React.Dispatch<React.SetStateAction<undefined>>;
  setValue;
  setFormattedPhone: React.Dispatch<React.SetStateAction<string>>;
  setSelectedOriginDestination: React.Dispatch<React.SetStateAction<string>>;
  setRouterState: React.Dispatch<React.SetStateAction<undefined>>;
  setRouterCity: React.Dispatch<React.SetStateAction<undefined>>;
  getTerminalData: (payload?: any) => void;
  terminalName: never[];
  states: never[];
  getMarketData: (payload?: any) => void;
  marketName: never[];
  setSelectedMarkets: React.Dispatch<React.SetStateAction<null>>;
  setSelecteTerminalOptions: React.Dispatch<React.SetStateAction<null>>;
  setSelecteStatedOptions: React.Dispatch<React.SetStateAction<never[]>>;
}) {
  if (router?.query?.parent_details) {
    let resData = JSON.parse(router?.query?.parent_details);
    const sendTime = new Date(resData?.send_time);
    const currentTime = new Date();
    const timeDifference = currentTime - sendTime;
    const twentyFourHoursInMilliseconds = 24 * 60 * 60 * 1000;

    if (timeDifference > twentyFourHoursInMilliseconds) {
      router.push("/expiredPage");
    } else if (resData?.mc_number) {
      setSelectedOption("MC");
      setRouterAddress(resData?.address);
      setInviteId(resData.parent_id);
      setValue("dot_number", resData?.dot_number);
      setValue("MC", resData?.mc_number);
      setFormattedPhone(resData?.phone);
      setSelectedOriginDestination(resData?.address);
      setValue("phone", resData?.phone);
      setRouterState(resData?.from_state);
      setRouterCity(resData?.city);
      let arr = resData?.state_names
        ?.split(",")
        ?.map((state: string) => state.trim());
      let codes = resData?.markets
        ?.split(",")
        ?.map((state: string) => state.trim());
      let statecodes = resData?.state_codes
        ?.split(",")
        ?.map((state: string) => state.trim());

      const payload = {
        market: codes,
      };
      getTerminalData(payload);

      let terminalarr = resData?.terminal_names
        ?.split(",")
        ?.map((state: string) => state.trim());
      const filteredTerminal = terminalName?.filter((item) =>
        terminalarr?.includes(item?.name)
      );

      const filteredStates = states?.filter((item) =>
        arr?.includes(item?.state_name)
      );

      const payloadMarket = {
        state_code: statecodes,
      };
      getMarketData(payloadMarket);

      const terminal = codes?.map((cityWithState: string) => {
        const cityData = cityWithState.split("-");
        return cityData[1];
      });

      const filteredMarket = marketName?.filter((item) =>
        terminal?.includes(item?.name)
      );

      setSelectedMarkets(filteredMarket);
      setSelecteTerminalOptions(filteredTerminal);
      setSelecteStatedOptions(filteredStates);
      setValue("email", resData?.child_email);
      setValue("company_name", resData?.billing_company);
    } else {
      setRouterAddress(resData?.address);
      setInviteId(resData.parent_id);
      setValue("dot_number", resData?.dot_number);
      setValue("MC", resData?.mc_number);
      setFormattedPhone(resData?.phone);
      setSelectedOriginDestination(resData?.address);
      setValue("phone", resData?.phone);
      setRouterState(resData?.from_state);
      setRouterCity(resData?.city);
      let arr = resData?.state_names
        ?.split(",")
        ?.map((state: string) => state.trim());
      let codes = resData?.markets
        ?.split(",")
        ?.map((state: string) => state.trim());
      let statecodes = resData?.state_codes
        ?.split(",")
        ?.map((state: string) => state.trim());

      const payload = {
        market: codes,
      };
      getTerminalData(payload);

      let terminalarr = resData?.terminal_names
        ?.split(",")
        ?.map((state: string) => state.trim());
      const filteredTerminal = terminalName?.filter((item) =>
        terminalarr?.includes(item?.name)
      );

      const filteredStates = states?.filter((item) =>
        arr?.includes(item?.state_name)
      );

      const payloadMarket = {
        state_code: statecodes,
      };
      getMarketData(payloadMarket);

      const terminalDataWithoutState = codes?.map((State: string) => {
        const cityData = State.split("-");
        return cityData[1];
      });

      const filteredMarket = marketName?.filter((item) =>
        terminalDataWithoutState?.includes(item?.name)
      );

      setSelectedMarkets(filteredMarket);
      setSelecteTerminalOptions(filteredTerminal);
      setSelecteStatedOptions(filteredStates);
      setValue("email", resData?.child_email);
      setValue("company_name", resData?.billing_company);
    }
  }
}

function resetFormValuesMod(
  setmcNumber: React.Dispatch<React.SetStateAction<undefined>>,
  reset,
  setValue,
  resetMultiselect: () => void
) {
  setmcNumber(false);
  reset();
  setValue("phone", "");
  setValue("company_address", "");
  resetMultiselect();
}

function handleErrorMod(
  setButtonDisable: React.Dispatch<React.SetStateAction<boolean>>,
  response: any,
  resetFormValues: () => void
) {
  setButtonDisable(false);
  if (Array.isArray(response.error_message?.email)) {
    response.error_message.email.forEach((email: string) => {
      toast.error(email, {
        position: toast.POSITION.TOP_CENTER,
      });
    });
  } else if (
    response?.status === "error" &&
    response?.message === "Account already exists."
  ) {
    toast.error(response?.message, {
      position: toast.POSITION.TOP_CENTER,
    });
    resetFormValues();
  } else {
    toast.error(response?.message, {
      position: toast.POSITION.TOP_CENTER,
    });
  }
}

function handleResponseMod({
  response,
  setButtonDisable,
  handleError,
  reset,
  setSelectedOriginDestination,
  setValue,
  setFormattedPhone,
  setSelectedMarkets,
  setSelecteTerminalOptions,
  setSelecteStatedOptions,
  setDotNumber,
  setmcNumber,
  router,
}: {
  response: any;
  setButtonDisable: React.Dispatch<React.SetStateAction<boolean>>;
  handleError: HandleError;
  reset: () => void;
  setSelectedOriginDestination: any;
  setValue: any;
  setFormattedPhone: any;
  setSelectedMarkets: any;
  setSelecteTerminalOptions: any;
  setSelecteStatedOptions: any;
  setDotNumber: any;
  setmcNumber: any;
}) {
  if (response?.status === "success" || response?.status_code === 200) {
    setButtonDisable(false);
    toast.success(response?.message, {
      position: toast.POSITION.TOP_CENTER,
    });
    reset();
    router.push("/users")
    setSelectedOriginDestination("");
    setValue("city", "");
    setValue("state", "");
    setFormattedPhone("");
    setSelectedMarkets("");
    setSelecteTerminalOptions("");
    setSelecteStatedOptions("");
    setDotNumber(false);
    setmcNumber(false);
  } else {
    handleError(response);
  }
}

function resetMultiselectMod(
  selectedTerminalOptions: null,
  setSelecteTerminalOptions: React.Dispatch<React.SetStateAction<null>>,
  selectedMarkets: null
) {
  if (selectedTerminalOptions) {
    selectedTerminalOptions.splice(0, selectedTerminalOptions.length);
    setSelecteTerminalOptions([...selectedTerminalOptions]);
  }

  if (selectedMarkets) {
    selectedMarkets.splice(0, selectedMarkets.length);
    setselectedMarkets([...selectedMarkets]);
  }
}

function handleRadioChangeMod({
  option,
  setCheck,
  setValue,
  setDotNumber,
  errors,
  setmcNumber,
  handleVerifiedMc,
  setDotMc,
  setSelectedOption,
}: {
  option: React.SetStateAction<string>;
  setCheck: React.Dispatch<React.SetStateAction<undefined>>;
  setValue;
  setDotNumber: React.Dispatch<React.SetStateAction<undefined>>;
  errors;
  setmcNumber: React.Dispatch<React.SetStateAction<undefined>>;
  handleVerifiedMc: (event: { target: { value: any } }) => Promise<void>;
  setDotMc: React.Dispatch<React.SetStateAction<string>>;
  setSelectedOption: React.Dispatch<React.SetStateAction<string>>;
}) {
  if (option === "MC") {
    setCheck(true);
    setValue("dot_number", "");
    setDotNumber(false);
    
    errors["dot_number"] = { message: "" };
  }
  if (option === "DOT") {
    setCheck(false);
    setmcNumber(false);
    setValue("MC", "");
    errors["dot_number"] = { message: "" };
    handleVerifiedMc("");
  }
  setDotMc(option);
  setSelectedOption(option);
}

function splitJsx(
  setMarketName: React.Dispatch<React.SetStateAction<never[]>>,
  setTerminalName: React.Dispatch<React.SetStateAction<never[]>>,
  setSelecteStatedOptions: React.Dispatch<React.SetStateAction<never[]>>,
  selectedMarkets: null,
  setSelecteTerminalOptions: React.Dispatch<React.SetStateAction<null>>,
  setSelectedMarkets: React.Dispatch<React.SetStateAction<null>>
) {
  const getMarketData = (payload: any = {}) => {
    getMarket(payload).then((response) => {
      if (response?.status == "success") {
        setMarketName(response?.data);
      } else {
        setMarketName(null);
      }
    });
  };

  const getTerminalData = (payload: any = {}) => {
    getTerminals(payload).then((response) => {
      if (response?.status == "success") {
        setTerminalName(response?.data);
      } else {
        setTerminalName(null);
      }
    });
  };

  const handleSelectStateChange = (
    e: MultiSelectChangeEvent,
    currentVal: any[]
  ) => {
    setSelecteStatedOptions(e.target.value);
    if (e.target.value.length > 0) {
      const stateCode = e.target.value;
      const stateCodes = stateCode?.map(
        (state: { state_code: any }) => state?.state_code
      );
      const payload = {
        state_code: stateCodes,
      };

      if (Array.isArray(selectedMarkets)) {
        const dataObj = selectedMarkets.filter((market: { state_code: any }) =>
          stateCodes.includes(market.state_code)
        );
        setSelectedMarkets(dataObj);
      }

      const marketCodes = Array.isArray(selectedMarkets) ? 
                              selectedMarkets.filter((market: { state_code: any }) =>
                                stateCodes.includes(market.state_code)
                              ).map((item:any)=>item.name)
                            : [];

      const payloadTerminal = {
        market: marketCodes,
      };

      getMarketData(payload);
      getTerminalData(payloadTerminal);
    } else {
      setSelecteTerminalOptions(null);
      setSelectedMarkets(null);
      setTerminalName([]);
      setMarketName([]);
    }
  };
  return { getTerminalData, getMarketData, handleSelectStateChange };
}

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 = [];
    searchedResponseData.features.map((item: any) => {
      let stateCode = null;
      let postalCode = null;
      let cityName = null;
      let stateName = null;

      item.context.map((contextData: any) => {
        if (contextData.id.includes("region")) {
          stateCode = contextData.short_code;
          stateName = contextData.text;
        }
        if (contextData.id.includes("postcode")) {
          postalCode = contextData.text;
        }
        if (contextData.id.includes("place")) {
          cityName = contextData.text;
        }
      });

      innerChild(
        item,
        stateCode,
        suggestionsArray,
        cityName,
        stateName,
        postalCode
      );
    });
    setSearchSuggestions(suggestionsArray);
  } else {
    setSearchSuggestions([]);
  }
}

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,
    });
  }
}

function companyDisabledScope(router) {
  return router?.query?.parent_details ? true : false;
}

function FormControlComponent({
  type,
  id,
  placeHolder,
  register,
  errors,
  disabled,
}: PropTypes) {
  return (
    <FormControl
      disabled={disabled}
      type={type}
      {...register(id)}
      id={id}
      autoComplete='off'
      placeholder={placeHolder}
      className={errors[id] && "is-invalid"}
    />
  );
}

function CustomFormControl({
  state,
  id,
  register,
  placeHolder,
  errors,
}: CustomPropType) {
  return (
    <FormControl
      type={state ? "text" : "password"}
      {...register(id)}
      id={id}
      autoComplete='off'
      placeholder={placeHolder}
      className={errors[id] ? "is-invalid" : ""}
    />
  );
}

interface ImgProps {
  field: string;
  errors: any;
  state: boolean;
  setState: any;
  alt: string;
}

function PasswordVisibilityImage(props: ImgProps) {
  const { field, errors, state, setState, alt } = { ...props };
  return (
    <span
      className={`icon_input `}
      style={{ right: `${errors[field] ? "20px" : "0px"}` }}
    >
      <Image
        className='passwordIcon show-hide-icon'
        onClick={() => setState(!state)}
        alt={alt}
        width={20}
        height={20}
        src={state ? "/images/pass.png" : "/images/hidepassword.png"}
      />
    </span>
  );
}

const handleChangeForColor = (event: React.ChangeEvent) => {
  let currentSelect: HTMLElement = document.getElementById(
    event.target.id
  ) as HTMLElement;
  if (
    (event.target as HTMLInputElement).value != "" &&
    (event.target as HTMLInputElement).value != null
  ) {
    currentSelect.style.color = "#000";
  } else {
    currentSelect.style.color = "#a8a8a8";
  }
};