/* eslint-disable react/jsx-key */
import React, { useEffect, useState } from "react";
import Image from "next/image";
import { useForm, Controller } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import { object, string, array } from "yup";
import { Turnstile } from "@marsidev/react-turnstile";
import * as yup from "yup";
import { ToastContainer, toast } from "react-toastify";
import {
  carrierSignUp,
  getStates,
  dotVerify,
  McFmcVerify,
  McVerify,
  getMarket,
  getTerminals,
  ClaimUsers,
  ClaimUsersEmail,
} from "@/services/public";
import Logo from "@/components/ui/pages/Logo";
import Link from "next/link";
import "primereact/resources/primereact.css";
import "primereact/resources/themes/saga-blue/theme.css";
import { MultiSelect, MultiSelectChangeEvent } from "primereact/multiselect";
import {
  Form,
  FormGroup,
  FormControl,
  Card,
  Row,
  Col,
  Modal,
  Button,
} from "react-bootstrap";
import { NextRouter, useRouter } from "next/router";
import { mapboxAddressActionUrl } from "@/helpers/projectHelper";
import Loader from "@/assets/common/Loader";

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 CarrierSignUpForm() {
  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 [showPassword, setShowPassword] = useState(false);
  const [claimedEmail, setClaimedEmail] = useState<string>();
  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
  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 [captaStatus, setCaptaStatus] = React.useState(true);
  const [FormCity, setFormCity] = useState();
  const [FormState, setFormState] = useState();
  const [StateData, setStateData] = useState();
  const [dotMc, setDotMc] = useState("MC");
  const [checkPhoneErrorMessage, setCheckPhoneErrorMessage] = useState(false);
  const [preloaderStatus, setPreloaderStatus] = useState(false);

  const onShow = () => {
    let selectAllCheckbox = document.querySelector(
      ".p-multiselect-header > .p-checkbox"
    );
    selectAllCheckbox.style.marginRight = "8px";
    selectAllCheckbox.after("Select All");
  };

  useEffect(() => {
    getStates().then((response) => {
      if (response?.status == "success") {
        setStates(response?.data);
      } else {
        setStates(null);
      }
    });
  }, [setStates]);

  const getMarketData = (payload: any = {}) => {
    getMarket(payload).then((response) => {
      if (response?.status == "success") {
        setMarketName(response?.data);
      } else {
        setMarketName([]);
      }
    });
  };

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

  const handleSelectStateChange = (
    e: MultiSelectChangeEvent,
    currentVal: any[]
  ) => {
    const selectedValues = e.target.value;                      
    setSelecteStatedOptions(selectedValues);
    if (selectedValues.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 {
      const payload = {
        state_code: '',
      };
      const payloadTerminal = {
        market: [],
      };
      setSelecteTerminalOptions(null);
      setSelectedMarkets(null);
      getMarketData(payload);
      getTerminalData(payloadTerminal);
    }
  };

  const handleSelectMarketChange = (e: MultiSelectChangeEvent) => {
    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 = selectedTerminalOptions.filter((terminal: { market: any }) =>
          marketCodes.includes(terminal.market)
        );
        setSelecteTerminalOptions(dataObj);
      }

      const payload = {
        market: marketCodes,
      };
      getTerminalData(payload);
    } else {
      setSelecteTerminalOptions(null);
      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 } =
    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"),
                first_name: string()
                  .required("First name is required")
                  .min(2, "First name must be at least 2 characters")
                  .max(40, "First name cannot exceed 40 characters"),
                last_name: string()
                  .required("Last name is required")
                  .min(2, "Last name must be at least 2 characters")
                  .max(40, "Last name cannot exceed 40 characters"),
                dot_number: yup
                  .string()
                  .test(
                    "dotMc-validation",
                    "Dot number is required",
                    function (value) {
                      if (dotMc === "DOT") {
                        return value && value.length >= 5;
                      }
                      return true;
                    }
                  ),

                MC: yup
                  .string()
                  .test(
                    "dotMc-validation",
                    "MC number is requied",
                    function (value) {
                      if (dotMc === "MC") {
                        return value && value.length >= 5;
                      }
                      return true;
                    }
                  ),
                phone: yup
                      .string()
                      .nullable()
                      .test(
                        "is-valid-phone",
                        "Phone number must be 10 digits",
                        (value) => {
                          if (!value || value.trim() === "") {
                            return true;
                          }
                          const digitsOnly = value.replace(/\D/g, "");
                          return /^\d{10}$/.test(digitsOnly);
                        }
                      )
                      .max(16, "Phone number must not exceed 16 characters"),
               
                state: string().nullable(),
                city: string().nullable(),
                selectedStateOptions: array()
                  .required("State is required")
                  .min(1, "Select at least one state"),
                selectedMarkets: array(),
                selectedTerminalOptions: array(),
                password: string().required("Please enter a new password"),
                confirm_password: string()
                  .required("Please confirm new password")
                  .test(
                    "passwords-match",
                    "The passwords do not match",
                    function (value) {
                      return this.parent.password === value;
                    }
                  ),
              }
            : {
              first_name: string()
                .required("First name is required")
                .min(2, "First name must be at least 2 characters")
                .max(40, "First name cannot exceed 40 characters"),
              last_name: string()
                .required("Last name is required")
                .min(2, "Last name must be at least 2 characters")
                .max(40, "Last name cannot exceed 40 characters"),
              password: string().required("Please enter a new password"),
              confirm_password: string()
                .required("Please confirm new password")
                .test(
                  "passwords-match",
                  "The passwords do not match",
                  function (value) {
                    return this.parent.password === value;
                  }
                ),
              }),
        })
      ),
    });

  const [selectedOption, setSelectedOption] = useState("MC");
  const handleRadioChange = (option: React.SetStateAction<string>) => {
    if (option === "MC") {
      setCheck(true);
      setValue("dot_number", "");
      setDotNumber(false);
      errors["dot_number"] = { message: "" };
      errors["MC"] = { message: "" };
    }
    if (option === "DOT") {
      setCheck(false);
      setmcNumber(false);
      setValue("MC", "");
      errors["dot_number"] = { message: "" };
      errors["MC"] = { message: "" };
      handleVerifiedMc("");
    }
    setDotMc(option);
    setSelectedOption(option);
  };
  const resetMultiselect = () => {
    if (selectedTerminalOptions) {
      selectedTerminalOptions.splice(0, selectedTerminalOptions.length);
      setSelecteTerminalOptions([...selectedTerminalOptions]);
    }

    if (selectedMarkets) {
      selectedMarkets.splice(0, selectedMarkets.length);
      setselectedMarkets([...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 [check, setCheck] = useState();
  const [fmcsaData, setFmcsaData] = useState({});
  const [RouterCity, setRouterCity] = useState();
  const [RouterState, setRouterState] = useState();
  const [ConcatName, setConcatName] = useState();
  const [fmcsaDot, SetFmcsaDot] = useState();
  const [fmcsaMc, setFmcsaMc] = useState();
  const onSubmit = async (data: any) => {
    try {
      if (check) {
        data.dot_number = null;
      }
      if (check === false) {
        data.MC = null;
      }

      if(dotNumberLoading){
        return
      }

      setConcatName(`${data.first_name} ${data.last_name}`);
      setAddressVerify(data?.company_address);
      setPasswordVerify(data?.password);
      setButtonDisable(true);
      setClaimedEmail(data?.email);
      setFmcsaData({
        dbaName: dbaName,
        totalDrivers: totalDrivers,
        legalName: legalName,
        dot_number: data.dot_number,
        mc_number: data.MC,
        totalPowerUnits: totalPowerUnits,
        brokerAuthorityStatus: brokerAuthorityStatus,
      });

      const payload = {
        billing_company: data?.company_name,
        dot_number: data?.dot_number,
        address: data?.company_address,
      };

      const res = await ClaimUsers(payload);

      if (res?.count > 0) {
        setClaimListing(res?.data);
        setShowRegisterPopup(true);
        setButtonDisable(false);
        return;
      }

      await signUp(data);
    } catch (error) {
      toast.error(error.message, {
        position: toast.POSITION.TOP_CENTER,
      });
    }
  };

  const signUp = async (data: any) => {
    try {
      setButtonDisable(true);
      const response = await carrierSignUp({
        company_name: data.company_name,
        email: data.email,
        address: data.company_address || RouterAddress,
        name: `${data.first_name} ${data.last_name}`,
        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: FormState || RouterState,
        city: FormCity || RouterCity,
        fmcsa_data: {
          dbaName: dbaName,
          totalDrivers: totalDrivers,
          legalName: legalName,
          dot_number: data.dot_number || fmcsaDot,
          mc_number: data.MC || fmcsaMc,
          totalPowerUnits: totalPowerUnits,
          brokerAuthorityStatus: brokerAuthorityStatus,
        },
      });

      handleResponse(response);
    } catch (error) {
      toast.error(error?.message, {
        position: toast.POSITION.TOP_CENTER,
      });
    }
  };

  const handleResponse = (response: any) => {
    if (response?.status === "success" || response?.status_code === 200) {
      setButtonDisable(false);
      toast.success(response?.message, {
        position: toast.POSITION.TOP_CENTER,
      });
      setTimeout(() => {
        router.push("/login");
      }, 3000);
    } else {
      handleError(response);
    }
  };

  const handleError = (response: any) => {
    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,
      });
    }
  };

  const resetFormValues = () => {
    setmcNumber(false);
    reset();
    setValue("phone", "");
    setValue("company_address", "");
    resetMultiselect();
    setTimeout(() => {
      router.push("/login");
    }, 2000);
  };

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

  const intialFormatPhoneNumber = (number: any) => {
    const str = number.toString();
    return str.replace(/(\d{3})(\d{3})(\d{4})/, '$1-$2-$3');
  };

  useEffect(() => {
    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(intialFormatPhoneNumber(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 dataCity = cityWithState.split("-");
          return dataCity[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 {
        setSelectedOption("DOT");
        setRouterAddress(resData?.address);
        setInviteId(resData.parent_id);
        setValue("dot_number", resData?.dot_number);
        setValue("MC", resData?.mc_number);
        setFormattedPhone(intialFormatPhoneNumber(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);
      }
    }
  }, [states, marketName]);

  const handlePhoneChange = (event: { target: { value: string } }) => {
    
    let inputValue = event.target.value;
    let cleanedInput = inputValue.replace(/\D/g, "");

    if (cleanedInput.length > 10) {
      cleanedInput = cleanedInput.slice(0, 10); // Allow only the first 10 digits
    }

    let formattedNumber = cleanedInput;

    if (cleanedInput.length > 3 && cleanedInput.length <= 6) {
      formattedNumber = `${cleanedInput.slice(0, 3)}-${cleanedInput.slice(3)}`;
    } else if (cleanedInput.length > 6) {
      formattedNumber = `${cleanedInput.slice(0, 3)}-${cleanedInput.slice(3, 6)}-${cleanedInput.slice(6)}`;
    }

    if(formattedNumber.length !== 12){
      if(formattedNumber.length == 0){
        setCheckPhoneErrorMessage(false);
      }else{
        setCheckPhoneErrorMessage(true);
        setValue("phone",formattedNumber);
      }
    }else{
      setCheckPhoneErrorMessage(false);
    }
    setFormattedPhone(formattedNumber);
  };

  const handleVerified = async (event: { target: { value: any } }) => {
    if (event?.target?.value?.length >= 5) {
      setDotNumberLoading(true);
      let res = await dotVerify(event.target.value);
      let res1 = await McFmcVerify(event.target.value);

      let Dotdata = res?.content?.carrier;
      setDbaName(Dotdata?.dbaName || "");
      setTotalDrivers(Dotdata?.totalDrivers);
      setLegalName(Dotdata?.legalName);
      setTotalPowerUnits(Dotdata?.totalPowerUnits);
      setBrokerAuthorityStatus(Dotdata?.brokerAuthorityStatus);
      setFmcsaMc(res1?.content[0]?.docketNumber);

      if (
        res?.status_code == 500 ||
        res?.content === null ||
        res?.content === undefined
      ) {
        setDotDisable(true);
        errors["dot_number"] = { message: "DOT Number not Verified" };
        setDotNumber(false);
      } else {
        errors["dot_number"] = { message: "" };
        setDotDisable(false);
        setDotNumber(true);
      }
      setDotNumberLoading(false);
    }

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

  const handleVerifiedMc = async (event: { target: { value: any } }) => {
    if (event?.target?.value?.length >= 5) {
      setmcNumberLoading(true);
      let res = await McVerify(event.target.value);
      let Dotdata = (res && res.content && res.content[0]?.carrier) || {};
      setDbaName(Dotdata?.dbaName || "");
      setTotalDrivers(Dotdata?.totalDrivers || 0);
      setLegalName(Dotdata?.legalName || "");
      setTotalPowerUnits(Dotdata?.totalPowerUnits || 0);
      setBrokerAuthorityStatus(Dotdata?.brokerAuthorityStatus || "N");
      SetFmcsaDot(Dotdata?.dotNumber);
      if (
        res?.status_code == 500 ||
        res?.content === null ||
        res?.content === undefined
      ) {
        setMcDisable(true);
        setmcNumber(false);
        errors["MC"] = {
          message: "MC Number not Verified",
        };
        setMcDisable(false);
      } else {
        errors["MC"] = { message: "" };
        setMcDisable(false);
        setmcNumber(true);
      }
      setmcNumberLoading(false);
    }

    if (event?.target?.value?.length === 0) {
      setmcNumber(false);
    }
  };
  const submitButtonText = () => {
    let buttonText: any = "Register";
    if (buttonDisable) {
      buttonText = (
        <>
          <span
            className="spinner-border spinner-border-sm"
            role="status"
            aria-hidden="true"
          ></span>{" "}
          Please wait...{" "}
        </>
      );
    }
    return buttonText;
  };

  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) {
    setValue("company_address", item.name);
    formState.errors.company_address = undefined;
    setSearchSuggestions([]);
    setSelectedOriginDestination(item.name);
    setCustomeAddressError("");
    setFormCity(item?.city);
    setFormState(item?.state);
    setStateData(item?.state);
  }
  const checkDot = () => {
    if (dotNumber === true) {
      return (
        <div
          style={{
            position: "absolute",
            right: "10px",
            top: "50%",
            transform: "translateY(-50%)",
          }}
        >
          <Image width={20} height={20} src={"/images/tick.jpeg"} alt={""} />
        </div>
      );
    }
  };
  const checkmc = () => {
    if (mcNumber === true) {
      return (
        <div
          style={{
            position: "absolute",
            right: "10px",
            top: "50%",
            transform: "translateY(-50%)",
          }}
        >
          <Image width={20} height={20} src={"/images/tick.jpeg"} alt={""} />
        </div>
      );
    }
  };

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

  const toggleRegisterPopup = () => {
    setShowRegisterPopup((prev) => !prev);
  };
  const toggleClaimPopup = () => {
    setShowClaimPopup((prev) => !prev);
  };
  const toggleEmailPopup = () => {
    setSendEmail((prev) => !prev);
  };
  const [claimId, setClaimID] = useState<number>();
  const UserClaim = async (i: any) => {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

    if (!claimedEmail || !emailRegex.test(claimedEmail)) {
      toast.error("Please enter a valid email address", {
        position: toast.POSITION.TOP_CENTER,
      });
    }
    setPreloaderStatus(true);
    const payload = {
      user_id: claimId,
      email: claimedEmail,
      password: PasswordVerify,
      address: AddressVerify,
      fmcsa_data: fmcsaData,
      from_state: StateData,
      city: FormCity,
      name: ConcatName,
    };

    let res = await ClaimUsersEmail(payload);
    if (res?.status === "success") {
      setPreloaderStatus(false);
      toast.success(res?.message, {
        position: toast.POSITION.TOP_CENTER,
      });
      setSendEmail(false);
      reset();
      setClaimedEmail("");
      setSelectedOriginDestination("");
      setPasswordVerify("");
      setAddressVerify("");
      setFormattedPhone("");
      setDotNumberLoading(false);
      setDotNumber(false);
      setTimeout(() => {
        router.push("/login");
      }, 2000);
    }
  };
  const FinalClaim = (e: any) => {
    setClaimedEmail(e?.target?.value);
  };
  return (
    <Card className="card1 ">
      {preloaderStatus && (
        <Loader />
      )}
      <ToastContainer />

      <Row className="justify-content-center my-auto">
        <Col md={10} className="my-3 px-4 px-md-0">
          <Logo />
          <h3 className="text-center heading my-3 my-md-5">
            Carrier Registration
          </h3>
          <Form onSubmit={handleSubmit(onSubmit)} autoComplete="off">
            <Row>
              <Col lg={12}>
                <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>
            </Row>
            <Row>
              <Col>
                <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>
              <FormGroup className="form-group">
                <div className="address-autocomplete-parent">
                  <FormControl
                    {...register("company_address")}
                    className={
                      (errors.company_address || customeAddressError) &&
                      "is-invalid"
                    }
                    id="origin_destination"
                    placeholder="Company address *"
                    autoComplete="off"
                    onInput={(e) => {
                      e.preventDefault();
                      getAddressSuggestions(e);
                    }}
                    value={selectedOriginDestination}
                    onChange={(e) => {
                      setSelectedOriginDestination(e.target.value);
                    }}
                    disabled={companyDisabledScope(router)}
                  />
                  <div
                    className={searchedSuggestions.length < 1 ? "d-none" : ""}
                  >
                    <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">
                    <h6 className="">
                      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>
            </Row>
            <Row>
              <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>
              <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>
            </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" && (
                <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>
              )}

              <Col lg={6}>
                <FormGroup className="form-group">
                  <FormControl
                    type="tel"
                    {...register("phone")}
                    id={"phone"}
                    disabled={router?.query?.parent_details ? true : false}
                    placeholder="Enter your phone (Ex: (xxx) xxx-xxxx)"
                    autoComplete="off"
                    value={formattedPhone}
                    onChange={handlePhoneChange}
                    className={checkPhoneErrorMessage ? "is-invalid" : ""}
                  />
                  <Form.Control.Feedback type="invalid">
                    {errors.phone?.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={
                            router?.query?.parent_details ? true : false
                          }
                          value={selectedStateOptions}
                          onChange={(e) => {
                            field.onChange(e.value);
                            handleSelectStateChange(e, field.value);
                          }}
                          optionLabel="state_name"
                          className={`form-control ${
                            errors.selectedStateOptions ? "is-invalid" : ""
                          }`}
                          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}>
                <FormGroup className="form-group">
                  <CustomFormControl
                    state={showPassword}
                    id="password"
                    placeHolder="Enter new password *"
                    register={register}
                    errors={errors}
                  />
                  <span className={`${errors.password ? "d-none" : ""}`}>
                    <PasswordVisibilityImage
                      field="password"
                      errors={errors}
                      state={showPassword}
                      setState={setShowPassword}
                      alt="Newpassword"
                    />
                  </span>
                  <Form.Control.Feedback type="invalid">
                    {errors.password?.message?.toString()}
                  </Form.Control.Feedback>
                </FormGroup>
              </Col>
            </Row>
            <Row>
              <Col lg={6}>
                <FormGroup className="form-group confirm_password_all">
                  <CustomFormControl
                    state={showConfirmPassword}
                    id="confirm_password"
                    placeHolder="Confirm new password"
                    register={register}
                    errors={errors}
                  />
                  <span>
                    <PasswordVisibilityImage
                      field="confirm_password"
                      errors={errors}
                      state={showConfirmPassword}
                      setState={setShowConfirmPassword}
                      alt="Confirmpassword"
                    />
                  </span>
                  <Form.Control.Feedback type="invalid">
                    {errors?.confirm_password?.message?.toString()}
                  </Form.Control.Feedback>
                </FormGroup>
              </Col>
            </Row>

            <Turnstile
              siteKey={process.env.NEXT_PUBLIC_CLOUDFLARE_TURNSTILE_KEY}
              options={{
                action: "submit-form",
                theme: "light",
                refreshExpired: "auto",
              }}
              onError={() => setCaptaStatus(true)}
              onExpire={() => setCaptaStatus(true)}
              onSuccess={() => setCaptaStatus(false)}
              scriptOptions={{
                appendTo: "body",
              }}
            />
            <Row className="justify-content-center my-3 px-3">
              <button
                type="submit"
                className="btn-block btn-color divStylecss-update"
                disabled={
                  buttonDisable || dotDisable || mcDisable || captaStatus || dotNumberLoading
                }
              >
                {submitButtonText()}
              </button>
            </Row>
            <Row className="justify-content-center my-3 px-3">
              <div className="bottom text-center">
                <p className="sm-text mx-auto mb-3">
                  Already have an account?
                  <Link href="/login">Login</Link>
                </p>
              </div>
            </Row>
          </Form>
        </Col>
      </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 modal-lg"
        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>Address</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>
                    <span className="">{item?.address}</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>
    </Card>
  );
}

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

interface CustomPropType extends PropTypes {
  state: boolean;
}

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: NextRouter) {
  return router?.query?.parent_details ? true : false;
}

function FormControlComponent({
  type,
  id,
  placeHolder,
  register,
  errors,
  disabled,
}: PropTypes) {
  const isFirstNameOrLastName: boolean = id === "first_name" || id === "last_name";
  return (
    <FormControl
      disabled={disabled}
      type={type}
      {...register(id, {
        onChange: (e: any) => {
          if (isFirstNameOrLastName) {
            e.target.value =
              e.target.value.charAt(0).toUpperCase() + e.target.value.slice(1);
          }
        },
      })}
      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";
  }
};