/* eslint-disable jsx-a11y/alt-text */

import React, { useEffect, useState } from "react";
import Image from "next/image";
import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import { object, string } from "yup";

import { ToastContainer, toast } from "react-toastify";
import { customerSignUp, dotVerify } from "@/services/public";
import Logo from "@/components/ui/pages/Logo";
import Link from "next/link";
import { useRouter } from "next/router";
import { Form, FormGroup, FormControl, Card, Row, Col } from "react-bootstrap";
import { mapboxAddressActionUrl } from "@/helpers/projectHelper";
import { Turnstile } from "@marsidev/react-turnstile";


const CustomerSignUpForm = () => {
  const { register, handleSubmit, setValue, formState, reset } = useForm({
    resolver: yupResolver(
      object().shape({
        first_name: string()
          .required("First name is required")
          .min(2, "First name must be at least 2 characters")
          .max(30, "First name cannot exceed 30 characters"),
        last_name: string()
          .required("Last name is required")
          .min(2, "Last name must be at least 2 characters")
          .max(30, "Last name cannot exceed 30 characters"),
        company_name: string()
          .required("Company name is required")
          .max(70, "Company name cannot exceed 70 characters"),
        current_address: string(),
        business_address: string(),
        dot_number: string()
          .required("DOT number is required")
          .min(5, "DOT number must be at least 5 characters"),
        email: string()
          .required("Email is required")
          .matches(
            /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/,
            "Please enter a valid email address"
          ),
        phone: 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(),
        terminal: string().nullable(),
        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;
            },
          ),
      }),
    ),
  });
  //Get URL Paraments
  const Router = useRouter();
  const { errors } = formState;
  const [inviteId, setInviteId] = useState()
  const [FormCity, setFormCity] = useState();
  const [FormState, setFormState] = useState();
  const [RouterCity, setRouterCity] = useState();
  const [RouterState, setRouterState] = useState();
  const [checkPhoneErrorMessage, setCheckPhoneErrorMessage] = useState(false);

  const onSubmit = async (data: any) => {
    setButtonDisable(true);
    const response = await customerSignUp({
      company_name: data.company_name,
      first_name: data.first_name,
      last_name: data.last_name,
      email: data.email,
      dot_number: data.dot_number,
      billing_address: businessAddress,
      current_address: data.current_address,
      business_phone: data.phone.replace(/\D/g, ""),
      state: data.state,
      city: data.city,
      password: data.password,
      parent_id: inviteId,
      from_state: FormState || RouterState,
      city: FormCity || RouterCity,
    });
    if (response?.message === "success") {
      Router.push("/login");
      setFormCity("")
      setFormState("")
      setCaptaStatus(true);
          setTimeout(() => {
            Router.push("/login");
        }, 2000);
    }
    
    if (Array.isArray(response.error_message?.email)){
      response.error_message.email.forEach(email => {
        toast.error(email, {
          position: toast.POSITION.TOP_CENTER,
        });
      });
      setButtonDisable(false);
      return
    }
    if (response?.status === "error" && response?.status_code !== 200) {
      setButtonDisable(false);
      toast.error(response?.message, {
        position: toast.POSITION.TOP_CENTER,
      });
    } else {
      setButtonDisable(false);
      toast.success(response?.message, {
        position: toast.POSITION.TOP_CENTER,
      });
      setTimeout(() => {
        Router.push("/login");
        // Code to be executed after 5 seconds
      }, 5000);

      reset();
      setValue("current_address", "");
      setValue("business_address", "");
      setValue("phone", "");
    }
  };
  const formatPhoneNumber = (phone) => {
    if (!phone) return "";

    const digits = phone.replace(/\D/g, ""); 

    if (digits.length <= 3) {
      return digits; 
    } else if (digits.length <= 6) {
      return digits.replace(/(\d{3})(\d+)/, "$1-$2");
    } else {
      return digits.replace(/(\d{3})(\d{3})(\d+)/, "$1-$2-$3");
    }
  };
  useEffect(() => {
    if (Router?.query?.parent_details) {
      let UserData = JSON.parse(Router?.query?.parent_details);
      const sendTime = new Date(UserData?.send_time);
      const currentTime = new Date();
      const timeDifference = currentTime - sendTime;
      const twentyFourHoursInMilliseconds = 24 * 60 * 60 * 1000;
      if (timeDifference > twentyFourHoursInMilliseconds) {
        Router.push('/expiredPage');
      } else {
        
        const formatted = formatPhoneNumber(UserData.phone);
        setValue("email", UserData?.child_email)
        setValue("phone", UserData?.phone)
        setValue("company_name", UserData?.company_name ? UserData?.company_name : "N/A")
        setCurrentAddress(UserData?.address)
        setBusinessAddress(UserData?.billing_address)
        setValue("business_address", UserData?.billing_address ? UserData?.billing_address : "N/A")
        setFormattedPhone(formatted)
        setValue("current_address", UserData?.address)
        setValue("dot_number", UserData?.dot_number)
        setInviteId(UserData?.parent_id)
        setRouterState(UserData?.from_state);
        setRouterCity(UserData?.city);
      }
    }
  }, [
    Router?.query?.parent_details,
    Router?.query?.parent_id])

  const [dotNumberLoading, setDotNumberLoading] = useState(false);
  const [buttonDisable, setButtonDisable] = useState(false);
  const [showPassword, setShowPassword] = useState(false);
  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
  const [dotDisable, setDotDisable] = useState(false);

  const [formattedPhone, setFormattedPhone] = useState("");
  const [currentAddressSuggesstions, setCurrentAddressSuggesstions] = useState(
    [],
  );
  const [captaStatus, setCaptaStatus] = React.useState(true);

  const [businessAddressSuggesstions, setBusinessAddressSuggesstions] =
    useState([]);
  const [customeAddressError, setCustomeAddressError] = useState("");
  const [currentAddress, setCurrentAddress] = useState("");
  const [businessAddress, setBusinessAddress] = useState("");
  const [isCurrentSame, setIsCurrentSame] = useState(false);
  const [dotNumber, setDotNumber] = useState();
  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 11 digits
    }

    let formattedNumber = cleanedInput;

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

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

    setFormattedPhone(formattedNumber);
  };

  async function getBusinessAddressSuggestions(event: any) {
    try {
      const searchedString = event.target.value;
      if (searchedString.length > 2) {
        const searchResponse = await fetch(
          mapboxAddressActionUrl(searchedString),
        );
        const searchedResponseData = await searchResponse.json();

        let suggestionsArray: any = getSuggestionArray(searchedResponseData);

        setBusinessAddressSuggesstions(suggestionsArray);
      } else {
        setBusinessAddressSuggesstions([]);
      }
    } catch (error) {
      setBusinessAddressSuggesstions([]);
    }
  }

  function getSuggestionArray(responseData: any) {
    let someArray: any = [];
    responseData?.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;
        }
      });
      if (item?.place_type?.[0] !== "country" && stateCode !== null) {
        someArray.push({
          name: item.place_name,
          city: cityName,
          state: stateName,
          lat: item?.center[1],
          lng: item.center[0],
          state_code: stateCode,
          post_code: postalCode,
        });
      }
    });
    return someArray;
  }

  async function getCurrentAddressSuggestions(event: any) {
    try {
      const searchedString = event.target.value;
      if (searchedString.length > 2) {
        const searchResponse = await fetch(
          mapboxAddressActionUrl(searchedString),
        );
        const searchedResponseData = await searchResponse.json();

        let suggestionsArray: any = getSuggestionArray(searchedResponseData);

        setCurrentAddressSuggesstions(suggestionsArray);
      } else {
        setCurrentAddressSuggesstions([]);
      }
    } catch (error) {
      setCurrentAddressSuggesstions([]);
    }
  }

  type SelectAddressType = {
    name: string;
    lat: string;
    lng: string;
    state_code: string | null;
    post_code: string | null;
  };

  function bindCurrentAddress(item: SelectAddressType) {
    setValue("current_address", item.name);
    formState.errors.current_address = undefined;
    setCurrentAddressSuggesstions([]);
    setCurrentAddress(item.name);
    setCustomeAddressError("");
    setFormCity(item?.city);
    setFormState(item?.state)
    if (isCurrentSame) {
      setBusinessAddress(item.name);
    }
  }

  function bindBusinessAddress(item: SelectAddressType) {
    setValue("business_address", item.name);
    formState.errors.business_address = undefined;
    setBusinessAddressSuggesstions([]);
    setBusinessAddress(item.name);
    setCustomeAddressError("");
  }

  function handleAddressCheckbox(e: any) {
    setIsCurrentSame(e.target.checked);
    if (isCurrentSame) {
      setBusinessAddress("");
      setValue("billing_address", "");
    } else {
      setValue("billing_address", setBusinessAddress);
      setBusinessAddress(currentAddress);
    }
  }

  const handleVerified = async (event: { target: { value: any } }) => {
    if (event?.target?.value?.length >= 5) {
      setDotNumberLoading(true);
      let res = await dotVerify(event.target.value);
      if (
        res?.status_code == 500 ||
        res?.content === null ||
        res?.content === undefined
      ) {
        setDotDisable(true);
        errors["dot_number"] = { message: "DOT Number is not verified" };
      } else {
        errors["dot_number"] = { message: "" };
        setDotNumber(true);
        setDotDisable(false);
      }
      setDotNumberLoading(false);
    }
    if (event?.target?.value?.length === 0) {
      setDotNumber(false);
    }
  };

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

  return (
    <Card className="card1">
      <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">
            Customer Registration
          </h3>
          <Form onSubmit={handleSubmit(onSubmit)} autoComplete="off">
            <Row>
              <Col sm={6}>
                <FormGroup className="form-group">
                  <FormControlComponent
                    type={"text"}
                    id={"first_name"}
                    placeHolder="Enter first name*"
                    register={register}
                    errors={errors}
                  />

                  <Form.Control.Feedback type="invalid">
                    {errors.first_name?.message?.toString()}
                  </Form.Control.Feedback>
                </FormGroup>
              </Col>
              <Col sm={6}>
                <FormGroup className="form-group">
                  <FormControlComponent
                    type={"text"}
                    id={"last_name"}
                    placeHolder="Enter last name*"
                    register={register}
                    errors={errors}
                  />

                  <Form.Control.Feedback type="invalid">
                    {errors.last_name?.message?.toString()}
                  </Form.Control.Feedback>
                </FormGroup>
              </Col>
            </Row>

            <FormGroup className="form-group">
              <FormControlComponent
                type={"email"}
                id={"email"}
                placeHolder="Enter your email*"
                register={register}
                errors={errors}
                disabled={!!Router?.query?.parent_details}
              />
              <Form.Control.Feedback type="invalid">
                {errors.email?.message?.toString()}
              </Form.Control.Feedback>
            </FormGroup>

            <FormGroup className="form-group">
              <FormControlComponent
                type={"text"}
                id={"company_name"}
                placeHolder="Enter your company name"
                register={register}
                errors={errors}
                disabled={!!Router?.query?.parent_details}
              />
              <Form.Control.Feedback type="invalid">
                {errors.company_name?.message?.toString()}
              </Form.Control.Feedback>
            </FormGroup>
            <Row>
              <FormGroup className="form-group">
                <div className="address-autocomplete-parent">
                  <FormControl
                    {...register("current_address")}
                    className={
                      (errors.current_address || customeAddressError) &&
                      "is-invalid"
                    }
                    id="current_address"
                    placeholder="Current Address / Branch Office Location"
                    autoComplete="off"
                    onInput={(e) => {
                      e.preventDefault();
                      getCurrentAddressSuggestions(e);
                    }}
                    disabled={!!Router?.query?.parent_details}

                    value={currentAddress}
                    onChange={(e) => setCurrentAddress(e.target.value)}
                  />
                  <div
                    className={
                      currentAddressSuggesstions.length < 1 ? "d-none" : ""
                    }
                  >
                    <ul className="city-listing-css" style={{ zIndex: 99 }}>
                      {currentAddressSuggesstions.map((item: any) => (
                        <li
                          key={item.name}
                          onClick={() => {
                            bindCurrentAddress({
                              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
                            });
                            setCurrentAddress(item.name);
                          }}
                        >
                          <div className="mb-3">{item?.name}</div>
                        </li>
                      ))}
                    </ul>
                  </div>
                  <Form.Control.Feedback type="invalid">
                    {errors.current_address?.message?.toString() ??
                      customeAddressError}
                  </Form.Control.Feedback>
                </div>
              </FormGroup>
            </Row>
            <Row>
              <div className="form-group">
                <FormGroup className="form-check">
                  <Form.Control
                    type="checkbox"
                    className="form-check-input p-0"
                    name="sameAddressCheck"
                    id="sameAddressCheck"
                    checked={isCurrentSame}
                    onChange={handleAddressCheckbox}
                    style={{ width: "20px", height: "20px", minHeight: 0 }}
                    disabled={!!Router?.query?.parent_details}
                  />
                  <Form.Label
                    className="ms-2 mb-0 form-check-label user-select-none"
                    htmlFor="sameAddressCheck"
                  >
                    Same As Current Address
                  </Form.Label>
                </FormGroup>
              </div>
            </Row>
            <Row>
              <FormGroup className="form-group">
                <div className="address-autocomplete-parent">
                  <FormControl
                    {...register("business_address")}
                    className={
                      (errors.business_address || customeAddressError) &&
                      "is-invalid"
                    }
                    id="business_address"
                    placeholder="Corporate / Billing Address"
                    autoComplete="off"
                    onInput={(e) => {
                      e.preventDefault();
                      getBusinessAddressSuggestions(e);
                    }}
                    disabled={isCurrentSame}
                    value={businessAddress}
                    onChange={(e) => setBusinessAddress(e.target.value)}
                    disabled={Router?.query?.parent_details ? true : false}

                  />
                  <div
                    className={
                      businessAddressSuggesstions.length < 1 ? "d-none" : ""
                    }
                  >
                    <ul className="city-listing-css" style={{ zIndex: 99 }}>
                      {businessAddressSuggesstions.map((item: any) => (
                        <li
                          key={item.name}
                          onClick={() => {
                            bindBusinessAddress({
                              name: item.name,
                              lat: item.lat,
                              lng: item.lng,
                              state_code: item.state_code,
                              post_code: item.post_code,
                            });
                            setBusinessAddress(item.name);
                          }}
                        >
                          <div className="mb-3">{item?.name}</div>
                        </li>
                      ))}
                    </ul>
                  </div>
                  <Form.Control.Feedback type="invalid">
                    {errors.business_address?.message?.toString() ??
                      customeAddressError}
                  </Form.Control.Feedback>
                </div>
              </FormGroup>
            </Row>
            <Col>
              <FormGroup className="form-group">
                <FormControl
                  type={"tel"}
                  maxLength={16}
                  {...register("phone")}
                  id={"phone"}
                  placeholder="Enter your phone (Ex: (xxx) xxx-xxxx)"
                  autoComplete="off"
                  value={formattedPhone}
                  onChange={handlePhoneChange}
                  className={checkPhoneErrorMessage && "is-invalid"}
                  disabled={Router?.query?.parent_details ? true : false}

                />
                <Form.Control.Feedback type="invalid">
                  {errors.phone?.message?.toString()}
                </Form.Control.Feedback>
              </FormGroup>
            </Col>

            <Row>
              <Col>
                <FormGroup className="form-group">
                  <div style={{ position: "relative" }}>
                    <FormControl
                      {...register("dot_number", {
                        onChange: (e) => handleVerified(e),
                      })}
                      type={"text"}
                      id={"dot_number"}
                      placeholder="Enter DOT number"
                      disabled={Router?.query?.parent_details ? true : false}

                    />
                    {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>
                  <p className="dot_msg error_msg_style">
                    {errors.dot_number?.message?.toString()}
                  </p>
                </FormGroup>
              </Col>
            </Row>
            <Row>
              <Col lg={6}>
                <FormGroup className="form-group">
                  <CustomFormControl
                    state={showPassword}
                    id="password"
                    placeHolder="Enter new password"
                    register={register}
                    errors={errors}
                  />
                  <PasswordVisibilityImage
                    field="password"
                    errors={errors}
                    state={showPassword}
                    setState={setShowPassword}
                    alt="Newpassword"
                  />
                  <Form.Control.Feedback type="invalid">
                    {errors.password?.message?.toString()}
                  </Form.Control.Feedback>
                </FormGroup>
              </Col>
              <Col lg={6}>
                <FormGroup className="form-group confirm_password_all">
                  <CustomFormControl
                    state={showConfirmPassword}
                    id="confirm_password"
                    placeHolder="Confirm new password"
                    register={register}
                    errors={errors}
                  />

                  <PasswordVisibilityImage
                    field="confirm_password"
                    errors={errors}
                    state={showConfirmPassword}
                    setState={setShowConfirmPassword}
                    alt="Confirmpassword"
                  />

                  <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 || captaStatus}
              >
                {buttonDisable ? (
                  <>
                    <span
                      className="spinner-border spinner-border-sm"
                      role="status"
                      aria-hidden="true"
                    ></span>{" "}
                    Please wait...{" "}
                  </>
                ) : (
                  "REGISTER"
                )}
              </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>
    </Card>
  );
};

export default CustomerSignUpForm;

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

interface CustomPropType extends PropTypes {
  state: boolean;
}

function FormControlComponent({
  type,
  id,
  placeHolder,
  register,
  errors,
  disabled,
}: PropTypes) {
  const isFirstNameOrLastName: boolean = id === "first_name" || id === "last_name";
  return (
    <FormControl
      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"}
      disabled={disabled}
    />
  );
}

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