import React, { useEffect, useState } from "react";
import { Form } from "react-bootstrap";
import { getChildCustomer, toGetSubUserSalesList } from "@/services/public";
import { useSession } from "next-auth/react";
import useAuthProvider from "@/useAuthProvider";
import "react-toastify/dist/ReactToastify.css";

const CustomerBadge: React.FC = (detailsQuoteData: any) => {
  const prefilledData = detailsQuoteData?.detailsQuoteData?.sendVar;
  const customerInfo = detailsQuoteData?.detailsQuoteData?.setTakeInput;
  const { Permission: userData } = useAuthProvider();
  const { data } = useSession();
  const token = data?.user?.image || "";
  const ownerId = detailsQuoteData?.detailsQuoteData?.ownerId;
  const logeduserId = data?.user?.id;
  const btndisabled = ownerId !== logeduserId;
  const setEdit = detailsQuoteData?.detailsQuoteData?.setEdit;
  const [suggestionsArray, setSuggestionsArray] = useState([]);
  const [displaysuggestion, setDisplaySuggetion] = useState(false);
  const [customerId, setCustomerId] = useState("");
  const [inputenable, setInputEnable] = useState(false);
  const [fieldValue, setFieldValue] = useState("");
  const [refby, setRefby] = useState("");
  const [custname, setCustName] = useState(false);
  const [requestedBySuggestions, setRequestedBySuggestions] = useState([]);
  const [showRequestedBySuggestions, setShowRequestedBySuggestions] = useState(false);

  useEffect(() => {
    setFieldValue(prefilledData?.chaild);
    setRefby(prefilledData?.selesRef);
    setCustomerId(prefilledData?.childId);
    setCustName(prefilledData?.chaild ? true : false);
  }, [prefilledData]);

  useEffect(() => {
    const sendId = sendIdMod(fieldValue, customerId);
    const combinedCondition = combinedConditionScope(
      suggestionsArray,
      custname,
      inputenable,
      fieldValue
    );
    customerInfo({
      child_customer_id: sendId ? null : customerId,
      customer: fieldValue,
      sales_rep: refby,
      enableBool: sendId ? false : combinedCondition,
    });
  }, [fieldValue, refby, customerId, suggestionsArray]);

  const handleStreamlineInputChange = (event: any) => {
    handleStreamlineInputChangeMod({
      event,
      setEdit,
      setFieldValue,
      setInputEnable,
      setCustName,
      setDisplaySuggetion,
      token,
      setSuggestionsArray,
    });
    setShowRequestedBySuggestions(false);
  };

  const handleDropdownstreamlineClick = (itemstreamline: any) => {
    handleDropdownstreamlineClickMod(
      setDisplaySuggetion,
      setFieldValue,
      itemstreamline,
      setRefby,
      detailsQuoteData,
      setCustomerId,
      refby
    );
  };

  const handleRequestedByClick = (item: any) => {
    setRefby(item);
    setShowRequestedBySuggestions(false);
    setEdit(true);
  };

  const handleInputChange = (event: any) => {
    const inputvalue = event?.target?.value?.slice(0, 50);
    setRefby(inputvalue);
    if (inputvalue?.length > 0) {
      setDisplaySuggetion(false);
      setEdit(false);
      setShowRequestedBySuggestions(true);
      const makePayload: any =  {
        ownerId: detailsQuoteData?.detailsQuoteData?.ownerId
      }
      toGetSubUserSalesList(makePayload).then((response) => {
        if (response?.status === "success") {
          setRequestedBySuggestions(response?.data);
        } else {
          setRequestedBySuggestions([]);
        }
      });
    } else {
      setShowRequestedBySuggestions(false);
      setRequestedBySuggestions([]);
    }
  };

  const suggestionClassName = displaysuggestion ? "position-absolute w-100 z-999" : "d-none";
  const requestedSuggestionClass = showRequestedBySuggestions ? "position-absolute w-100" : "d-none";
  const className = suggestionsArray.length > 0 ? "city-listing-css" : "d-none";
  const requestedValue = refby || "";

  return jsxContent({
    userData,
    btndisabled,
    handleStreamlineInputChange,
    fieldValue,
    suggestionClassName,
    className,
    suggestionsArray,
    handleDropdownstreamlineClick,
    handleInputChange,
    requestedValue,
    data,
    requestedBySuggestions,
    requestedSuggestionClass,
    handleRequestedByClick,
  });
};

export default CustomerBadge;

function combinedConditionScope(
  suggestionsArray: never[],
  custname: boolean,
  inputenable: boolean,
  fieldValue: string
) {
  return (
    !(suggestionsArray?.length === 0 && custname === true) &&
    suggestionsArray?.length === 0 &&
    inputenable === true &&
    !(suggestionsArray?.length > 0 && fieldValue?.length > 0)
  );
}

function sendIdMod(fieldValue: string, customerId: string) {
  return fieldValue == "" && parseInt(customerId) > 0;
}

function handleDropdownstreamlineClickMod(
  setDisplaySuggetion: React.Dispatch<React.SetStateAction<boolean>>,
  setFieldValue: React.Dispatch<React.SetStateAction<string>>,
  itemstreamline: any,
  setRefby: React.Dispatch<React.SetStateAction<string>>,
  detailsQuoteData: any,
  setCustomerId: React.Dispatch<React.SetStateAction<string>>,
  refby: any
) {
  setDisplaySuggetion(false);
  setFieldValue(itemstreamline?.customer);
  setRefby(itemstreamline?.sales_rep);
  detailsQuoteData?.name(itemstreamline?.sales_rep);
  setCustomerId(itemstreamline?.id);
}

function handleStreamlineInputChangeMod({
  event,
  setEdit,
  setFieldValue,
  setInputEnable,
  setCustName,
  setDisplaySuggetion,
  token,
  setSuggestionsArray,
}: {
  event: any;
  setEdit: any;
  setFieldValue: React.Dispatch<React.SetStateAction<string>>;
  setInputEnable: React.Dispatch<React.SetStateAction<boolean>>;
  setCustName: React.Dispatch<React.SetStateAction<boolean>>;
  setDisplaySuggetion: React.Dispatch<React.SetStateAction<boolean>>;
  token: string;
  setSuggestionsArray: React.Dispatch<React.SetStateAction<never[]>>;
}) {
  const sanitizedInput = event?.target?.value?.slice(0, 50);
  const inputvalue = sanitizedInput.replace(/\s+/g, " ");
  setEdit(true);
  setFieldValue(inputvalue);
  if (inputvalue?.length > 0) {
    setInputEnable(true);
    setCustName(false);
    setDisplaySuggetion(true);
  } else {
    setDisplaySuggetion(false);
  }
  let queryparm = `customer=${inputvalue}`;
  getChildCustomer(token, 1, queryparm).then((response) => {
    if (response?.status === "success") {
      setSuggestionsArray(response?.data);
    }
  });
}

function jsxContent({
  userData,
  btndisabled,
  handleStreamlineInputChange,
  fieldValue,
  suggestionClassName,
  className,
  suggestionsArray,
  handleDropdownstreamlineClick,
  handleInputChange,
  requestedValue,
  data,
  requestedBySuggestions,
  requestedSuggestionClass,
  handleRequestedByClick,
}: {
  userData: undefined;
  btndisabled: boolean;
  handleStreamlineInputChange: (event: any) => void;
  fieldValue: string;
  suggestionClassName: string;
  className: string;
  suggestionsArray: never[];
  handleDropdownstreamlineClick: (itemstreamline: any) => void;
  handleInputChange: (event: any) => void;
  requestedValue: string;
  data;
  requestedBySuggestions: any[];
  requestedSuggestionClass: string;
  handleRequestedByClick: (item: any) => void;
}): React.ReactElement<any, any> | null {
  return (
    <>
      {userData?.ViewCustomerTab && userData?.SelectAddCustomer ? (
        <>
          <div
            style={{
              display: "flex",
              alignItems: "center",
              gap: "10px",
              marginBottom: "1rem",
              marginTop: "10px",
            }}
            className="form-group"
          >
            <div style={{ visibility: "visible" }}>
              <label>Customer/Lead:</label>
            </div>
            <div className="position-relative">
              <Form.Control
                className="form-field form-control"
                name="stramline"
                onChange={handleStreamlineInputChange}
                value={fieldValue}
                style={{ visibility: "visible" }}
              />
              <div className={suggestionClassName}>
                <ul className={className}>
                  {suggestionsArray.map((item, index) => (
                    <li
                      key={index}
                      onClick={() => handleDropdownstreamlineClick(item)}
                    >
                      <b>{item?.customer}</b>
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          </div>
          <div
            style={{
              display: "flex",
              alignItems: "center",
              gap: "10px",
              marginBottom: "1rem",
              marginTop: "10px",
            }}
            className="form-group position-relative" 
          >
            <div
              style={{
                width: "125px",
                visibility: userData?.ViewRequestedBy ? "visible" : "hidden",
              }}
            >
              <label>Requested By:</label>
            </div>
            <div className="position-relative">
              <Form.Control
                className="form-field form-control"
                name="requestedBy"
                onChange={handleInputChange}
                value={requestedValue}
                style={{ visibility: userData?.ViewRequestedBy ? "visible" : "hidden" }}
                autoComplete="off"
              />
              <div className={requestedSuggestionClass}>
                <ul className="city-listing-css">
                  {requestedBySuggestions?.map((item, index) => (
                    <li key={index} onClick={() => handleRequestedByClick(item)}>
                      <b>{item}</b>
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          </div>
        </>
      ) : (
        <>
          <div
            style={{
              display: "flex",
              alignItems: "center",
              gap: "10px",
              marginBottom: "1rem",
              marginTop: "10px",
            }}
            className="form-group"
          >
            <div
              style={{
                width: "125px",
                visibility: userData?.ViewRequestedBy ? "visible" : "hidden",
              }}
            >
              <label>Requested By:</label>
            </div>
            <Form.Control
              disabled={btndisabled}
              className="form-field form-control"
              name="requestedBy"
              onChange={handleInputChange}
              value={requestedValue}
              style={{
                visibility: userData?.ViewRequestedBy ? "visible" : "hidden",
              }}
            />
            {userData?.ViewRequestedBy && (
              <div className={requestedSuggestionClass}>
                <ul className="city-listing-css">
                  {requestedBySuggestions?.map((item, index) => (
                    <li key={index} onClick={() => handleRequestedByClick(item)}>
                      <b>{item}</b>
                    </li>
                  ))}
                </ul>
              </div>
            )}
          </div>
          <div
            style={{
              display: "flex",
              alignItems: "center",
              gap: "10px",
              marginBottom: "1rem",
              marginTop: "10px",
            }}
            hidden={data?.user?.group_type === "carriers"}
            className="form-group"
          >
            <div style={{ visibility: "hidden" }}>
              <label>Customer/Lead:</label>
            </div>
            <div className="position-relative">
              <Form.Control
                className="form-field form-control"
                name="stramline"
                disabled={btndisabled}
                onChange={handleStreamlineInputChange}
                value={fieldValue}
                style={{ visibility: "hidden" }}
              />
              {userData?.ViewCustomerTab && (
                <div className={suggestionClassName}>
                  <ul className={className}>
                    {suggestionsArray.map((item, index) => (
                      <li
                        key={index}
                        onClick={() => handleDropdownstreamlineClick(item)}
                      >
                        <b>{item?.customer}</b>
                      </li>
                    ))}
                  </ul>
                </div>
              )}
            </div>
          </div>
        </>
      )}
    </>
  );
}