import { ENDPOINTS } from "@/api/apiEndpoints";
import API, { ApiMethods } from "@/api/apiFunction";
import NoDataFound from "@/components/common/NoDataFoundMsg";
import FullPageLoader from "@/components/common/loader/FullPageLoader";
import functions from "@/utils/functions";
import { useRouter } from "next/router";
import React, { useEffect, useState } from "react";

// types
type propsType = { dealerId: string | null };
const DealersLeadsDetails = ({ dealerId = null }: propsType) => {
  const [leadsData, setLeadsData] = useState<string[]>([]);
  const [loader, setLoader] = useState<boolean>(true);
  const router = useRouter();

  //  GET DEALERS LEADS DETAILS
  const getDetails = async () => {
    try {
      if (dealerId) {
        const res = await API(
          `${ENDPOINTS.getDealerLeadById}${dealerId}`,
          ApiMethods.GET
        );
        let data = (res?.data as { data: object })?.data;
        setLoader(false);
        if (res?.status && Array.isArray(data) && data?.length) {
          data = data[0] as Record<string, string>;

          const getRequreData = {
            "Dealership name": functions.checkEmpty(
              (data as { dealershipname: string })?.dealershipname,
              "-"
            ),
            "Dealership address": functions.checkEmpty(
              (data as { dealershipaddress: string })?.dealershipaddress,
              "-"
            ),
            City: functions.checkEmpty((data as { city: string })?.city, "-"),
            States: functions.checkEmpty(
              (data as { states: string })?.states,
              "-"
            ),
            Zipcode: functions.checkEmpty(
              (data as { zipcode: string })?.zipcode,
              "-"
            ),
            Contact: functions.checkEmpty(
              (data as { Contact: string })?.Contact,
              "-"
            ),
            "Contact phone": functions.checkEmpty(
              (data as { ContactPhone: string })?.ContactPhone,
              "-"
            ),
            "Contact mail": functions.checkEmpty(
              (data as { ContactMail: string })?.ContactMail,
              "-"
            ),
            "Website URL": functions.checkEmpty(
              (data as { WebsiteURL: string })?.WebsiteURL,
              "-"
            ),
            "Accounting contact": functions.checkEmpty(
              (data as { AccountingContact: string })?.AccountingContact,
              "-"
            ),
            "Accounting email": functions.checkEmpty(
              (data as { AccountingEmail: string })?.AccountingEmail,
              "-"
            ),
            "Accounting phone": functions.checkEmpty(
              (data as { Accountingphone: string })?.Accountingphone,
              "-"
            ),
            "Shop smart market rep": functions.checkEmpty(
              (data as { ShopSmartMarketRep: string })?.ShopSmartMarketRep,
              "-"
            ),
            "Billing address": functions.checkEmpty(
              (data as { billingAddress: string })?.billingAddress,
              "-"
            ),
            "Billing city": functions.checkEmpty(
              (data as { billingcity: string })?.billingcity,
              "-"
            ),
            "Billing state": functions.checkEmpty(
              (data as { billingstate: string })?.billingstate,
              "-"
            ),
            "Billing zipcode": functions.checkEmpty(
              (data as { billingzipcode: string })?.billingzipcode,
              "-"
            ),
            "Lead email adress1": functions.checkEmpty(
              (data as { leadeamiladress1: string })?.leadeamiladress1,
              "-"
            ),
            "Lead email adress2": functions.checkEmpty(
              (data as { leadeamiladress2: string })?.leadeamiladress2,
              "-"
            ),
            "Lead email adress3": functions.checkEmpty(
              (data as { leadeamiladress3: string })?.leadeamiladress3,
              "-"
            ),
            "Email format1": functions.checkEmpty(
              (data as { emailformat1: string })?.emailformat1,
              "-"
            ),
            "Email format2": functions.checkEmpty(
              (data as { emailformat2: string })?.emailformat2,
              "-"
            ),
            "Email format3": functions.checkEmpty(
              (data as { emailformat3: string })?.emailformat3,
              "-"
            ),
            "Cl phone": functions.checkEmpty(
              (data as { clphone: string })?.clphone,
              "-"
            ),
            "Radius center": functions.checkEmpty(
              (data as { radiuscenter: string })?.radiuscenter,
              "-"
            ),
            "Pay status": functions.checkEmpty(
              ((data as { paystatus: string })?.paystatus=='0')?'0':
              (data as { paystatus: string })?.paystatus,
              "-"
            ),
            "Center zipcode": functions.checkEmpty(
              (data as { centerzipcode: string })?.centerzipcode,
              "-"
            ),
            Note: functions.checkEmpty((data as { Note: string })?.Note, "-"),
            Status: functions.checkEmpty(
              ((data as { status: string })?.status=='0')?'0':
              (data as { status: string })?.status,
              "-"
            ),
            "Created date": functions.checkEmpty(
              functions.dateFormet(
                (data as { created_date: string })?.created_date
              ),
              "-"
            ),
          };
          setLeadsData(getRequreData as unknown as string[]);
        } else {
          setLeadsData([]);
        }
      }
    } catch (e) {
      console.log(e, "error");
      setLeadsData([]);
      setLoader(false);
    }
  };

  useEffect(() => {
    getDetails();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [dealerId]);

  return (
    <div className="ds_inr_box">
      <div className="detail_head">
        <button
          onClick={() => {
            router?.back();
          }}
        >
          Back
        </button>
        <h1>Dealer Leads Details</h1>
      </div>
      <div className="ds_data_table detail_data_table">
        <div className="content_list">
          {loader ? (
            <FullPageLoader />
          ) : (
            <>
              {Object.entries(leadsData)?.length ? (
                <>
                  {Object.entries(leadsData)?.map((field, i) => (
                    <div key={i} className="detail_inner_main">
                      <div className="detail_name">
                        <span> {field[0]}: </span>
                      </div>
                      <div className="detail_field">
                        <span>{field[1]}</span>
                      </div>
                    </div>
                  ))}
                </>
              ) : (
                <NoDataFound />
              )}
            </>
          )}
        </div>
      </div>
    </div>
  );
};

export default DealersLeadsDetails;