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

import React, { useEffect, useState, useRef } 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 { clientCreate1, dotVerify } from "@/services/public";

import { useRouter } from "next/router";
import { Form, FormGroup, FormControl, Row, Col } from "react-bootstrap";
import { mapboxAddressActionUrl } from "@/helpers/projectHelper";
import { useSession } from "next-auth/react";
export default function AddClient() {

  const { register, handleSubmit, setValue, formState, reset } = useForm({
    resolver: yupResolver(
      object().shape({
        first_name: string()
          .max(30)
          .required("First name is required"),
        last_name: string()
          .max(30)
          .required("Last name is required"),
        company_name: string()
          .required("Company name is required")
          .max(70),
        current_address: string(),
        business_address: string(),
        email: string().email().required("Email is required"),
        invite_client_email: string().email("Invite Email must be a valid email").required("Invite Email Is Required"),
        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(),
        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 onSubmit = async (datas: any) => {
    setButtonDisable(true);
    const response = await clientCreate1({
      company_name: datas.company_name,
      first_name: datas.first_name,
      last_name: datas.last_name,
      email: datas.email,
      dot_number: datas.dot_number?datas.dot_number:"12345",
      billing_address: businessAddress,
      current_address: datas.current_address,
      business_phone: datas.phone.replace(/\D/g, ""),
      company_website: datas.company_website,
      state: datas.state,
      city: datas.city,
      password: datas.password,
      parent_id: inviteId,
      from_state: FormState || RouterState,
      city: FormCity || RouterCity,
      client_type: "customer",
      invite_client_email: datas?.invite_client_email,
      name: undefined,
      zip_code: undefined,
      FormState: undefined,
      FormCity: undefined
    });
    
    if (response?.message === "success") {
      setFormCity("");
      setFormState("");
      reset()
    }

    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,
      });
      Router.push("/users")
      reset();
      setValue("current_address", "");
      setValue("business_address", "");
      setValue("phone", "");
    }
  };
  const { data } = useSession();
  const toastShownRef = useRef(false);
  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(() => {
    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 {
        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(UserData?.phone)
        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 [dotDisable, setDotDisable] = useState(false);

  const [formattedPhone, setFormattedPhone] = useState("");
  const [currentAddressSuggesstions, setCurrentAddressSuggesstions] = useState(
    [],
  );
  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: any } }) => {
    const cleanedInput = event.target.value.replace(/\D/g, "");
    const formattedNumber = cleanedInput.replace(
      /(\d{3})(\d{3})(\d{4})/,
      "$1-$2-$3",
    );
    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);
    setValue("city", item.city);
    setValue("state", 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 (
    <div>
      <ToastContainer />
      <div className="end-icon">
        <button
          onClick={() => Router.push("/users")}
          type='button'
          className='btn btn-primary svg-item-back 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 Customer
      </h3>
    </div>
      <Form className="Form-client" 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>
        <Row>
          
          <Col lg={6}>  <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></Col>
          <Col lg={6}>
            <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>
          </Col>

</Row>
        <Row>
        
          <Col lg={6}>
            <FormGroup className="form-group">
              <FormControlComponent
                type={"text"}
                id={"company_website"}
                placeHolder="Enter your company website"
                register={register}
                errors={errors}
                disabled={!!Router?.query?.parent_details}
              />
              <Form.Control.Feedback type="invalid">
                {errors.company_website?.message?.toString()}
              </Form.Control.Feedback>
            </FormGroup>
          </Col>
          <Col lg={ 6}>
            <FormGroup className="form-group">
              <FormControl
                type={"tel"}
                {...register("phone")}
                id={"phone"}
                placeholder="Enter your phone (Ex: (xxx) xxx-xxxx)"
                autoComplete="off"
                value={formattedPhone}
                onChange={handlePhoneChange}
                className={errors.phone && "is-invalid"}
                disabled={Router?.query?.parent_details ? true : false}

              />
              <Form.Control.Feedback type="invalid">
                {errors.phone?.message?.toString()}
              </Form.Control.Feedback>
            </FormGroup>
          </Col>
      </Row>
        <Row>
          <Col >
          <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)
                  setValue("city", "");
                  setValue("state", "");
                }}
              />
              <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>
          </Col>
          <Col lg={6}><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}

              />
              <Col lg={6}>
                <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: "5px", height: "15px", minHeight: 0 }}
                      disabled={!!Router?.query?.parent_details}
                    />
                    <Form.Label
                      className="ms-3 mb-0 form-check-label user-select-none"
                      htmlFor="sameAddressCheck"
                    
                    >
                      Same As Current Address
                    </Form.Label>
                  </FormGroup>
                </div>
              </Col>
              <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></Col>
        
        </Row>
        <Row className="align-items-end">
      
          <Col lg={6}>
            <span >&nbsp; </span>

            <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>
          <Col lg={6}>
            <FormGroup className="form-group">
            

              <FormControlComponent
                type={"email"}
                id={"invite_client_email"}
                placeHolder="Draydex invite email*"
                register={register}
                errors={errors}
                disabled={!!Router?.query?.parent_details}
              />
              <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}
          >
            {buttonDisable ? (
              <>
                <span
                  className="spinner-border spinner-border-sm"
                  role="status"
                  aria-hidden="true"
                ></span>{" "}
                Please wait...{" "}
              </>
            ) : (
              "Save"
            )}
          </button></div>
         
        </Row>
      
      </Form>

    </div>
  )
}


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) {
  return (
    <FormControl
      type={type}
      {...register(id)}
      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>
  );
}