import { useEffect, useState, useRef } from "react";
import { ScaleLoader } from "react-spinners";
import { DataTable } from "primereact/datatable";
import { Column } from "primereact/column";
import { useSession } from "next-auth/react";
import "primereact/resources/primereact.css";
import "primereact/resources/themes/saga-blue/theme.css";
import { InputText } from "primereact/inputtext";
import { Dropdown } from "primereact/dropdown";

import "primeicons/primeicons.css";
import { useRouter } from "next/router";
import "rsuite/dist/rsuite.min.css";
import { Paginator } from "primereact/paginator";
import "react-toastify/dist/ReactToastify.css";
import { ToastContainer, toast } from "react-toastify";
import swal from "sweetalert";
import { Modal } from "react-bootstrap";
import { Button } from "primereact/button";
import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import * as Yup from "yup";
import {
  getAllClaimRequestList,
  toAcceptClaimRequest,
  toRejectClaimRequest,
} from "@/services/public";
import PaginationTitle from "../pages/PaginationTitle";

interface Props {
  datalisting: any;
  breadcrumbs: {
    title: string;
    path: string;
  }[];
}

interface RowDataCarrier {
  user_id: number;
  username: string | null;
  name: string;
  email: string;
  carrier_id: number;
  is_claimed: number;
}

function ClaimRequestTable(props: Props) {
  const { data } = useSession();
  const [isloading, setIsloading] = useState(true);
  const [totalRecords, setTotalRecords] = useState(0);
  const [sortField, setSortField] = useState("");
  const [sortOrder, setSortOrder] = useState(null);
  const [listingref, setListingRef] = useState(false);
  const dt = useRef(null);
  const [first, setFirst] = useState(0);
  const token = data?.user?.image;
  const [rateQuotesdata, setRateQuotesdata] = useState();
  const [isModalActive, setModalActive] = useState(false);
  const [toModalValueSet, setModalValueSet] = useState<RowDataCarrier | null>(
    null,
  );
  const router = useRouter()
  const columns = [
    { field: "email", header: "Applicant Email" },
    { field: "requestType", header: "Request Type" },
    { field: "username", header: "User Name" },
    { field: "claimRequestAction", header: "Action" },
  ];
  const [visibleColumns] = useState(columns);
  const [perPageDataShow, setPerPageDataShow] = useState(0);

  const validationSchema = Yup.object().shape({
    reason_comment: Yup.string()
      .nullable("")
      .trim()
      .required("Reason for reject request is required")
      .min(3, "Reason for reject request must be at least 3 characters")
      .max(150, "Reason for reject request must not exceed 150 characters"),
    carrier_name: Yup.string().nullable(""),
    carrier_id: Yup.string().nullable(""),
    email: Yup.string().nullable(""),
  });
  const claimRequestDataGet = (
    pageno: any,
    page,
    query: any | null = null,
  ) => {    
    setIsloading(true);
    const queryparams = buildQueryParam(query);
    getAllClaimRequestList(pageno, page, queryparams)
      .then(handleClaimRequestListResponse)
      .catch(handleClaimRequestListError)
      .finally(() => setIsloading(false));
  };

  const buildQueryParam = (query: any | null) => {
    const queryparamdata = queryparam(query);
    return Object.entries(queryparamdata)
      .map(([key, value]) => `${key}=${value}`)
      .join("&");
  };

  const handleClaimRequestListResponse = claimRequest(setTotalRecords, setRateQuotesdata, setPerPageDataShow);

  const handleClaimRequestListError = (error: any) => {
    setIsloading(false);
  };

  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(() => {
    const query = {
      name: "",
      cancel_reasons: "",
      reject_reasons: "",
      created_date:"",
      primary:"",
      username:"",
      is_reject:"",
      request_type:"",
      email:""
    };
    claimRequestDataGet(token, 1, query);
    setListingRef(false);
  }, [listingref, token]);
  const clearFilter=()=>{
    setClientFilterValue("")
     setReasonFilterValue ("")
     setApplicantEmailFilterValue("")
     setusername1FilterValue("")
     setRequesttypeFilterValue("")
       setAdminFilterValue ("")
        setDateFilterValue  ("")
        setApplicantFilterValue ("")
        setFirst(1)
         setclaimFilterValue("")
         const query = {
            name: "",
            email: "",
            username: "",
            cancel_reasons:"",
            reject_reasons:"",
            created_date:"",
            is_reject:""
        };
        claimRequestDataGet(token, 1, query);
        setListingRef(false);
}
  const header = (
 
    <div className="random">
      <div className="table-header"><h3>Manage Claim Request List</h3></div>
                    
                   
                </div>
  );

  const onPageChange = (event: any) => {
    let perpage: any = event.page + 1;
    
    setFirst(event.first);
    const query = {
      name: ClientFilterValue,
        cancel_reasons: ReasonFilterValue,
        reject_reasons: AdminFilterValue,
        created_date:DateFilterValue,
        primary:ApplicantFilterValue,
        username:username1FilterValue,
        is_reject:claimFilterValue,
        request_type:RequesttypeFilterValue,
        email:ApplicantEmailFilterValue
    };
    claimRequestDataGet(token, perpage, query);
  };

  const CarrierNameBodyTemplate: any = (rowData: any) => {
    
    if (
      templateCarrier(rowData)
    ) {
      return (
        <>
          <div className="CustomerCulamnCss">
            <span className="break-all" >N/A</span>
          </div>
        </>
      );
    } else {
      return (
        <>
          <div className="CustomerCulamnCss">
            <span className="break-all" >
              {rowData?.billing_company}
            </span>
          </div>
        </>
      );
    }
  };
  const CarrierNameLegalTemplate: any = (rowData: any) => {
    if (
      legalTemp(rowData)
    ) {
      return (
        <>
          <div className="CustomerCulamnCss">
            <p>N/A</p>
          </div>
        </>
      );
    } else {
      return (
        <>
          <div className="CustomerCulamnCss">
            <p className="break-all" >{rowData?.leagal_name}</p>
          </div>
        </>
      );
    }
  };
  const CarrierNameDOTemplate: any = (rowData: any) => {
    if (
      dotTemp1(rowData)
    ) {
      return (
        <>
          <div className="CustomerCulamnCss">
            <p>{rowTempData(rowData)}</p>
          </div>
        </>
      );
    } else {
      return (
        <>
          <div className="CustomerCulamnCss">
            <p>{rowTempData1(rowData)}</p>
          </div>
        </>
      );
    }
  };

  const CarrierNamePhoneTemplate: any = (rowData: any) => {
    if (
      phoneTemp(rowData)
    ) {
      return (
        <>
          <div className="CustomerCulamnCss">
            <p>N/A</p>
          </div>
        </>
      );
    } else {
      return (
        <>
          <div className="CustomerCulamnCss">
            <p>{rowTemp(rowData)}</p>
          </div>
        </>
      );
    }
  };
  const PrimaryNameBodyTemplate: any = (rowData: any) => {
    if (
      primaryTemp1(rowData)
    ) {
      return (
        <>
          <p>N/A</p>
        </>
      );
    } else {
      return (
        <>
          <p>{primaryTemp2(rowData)}</p>
        </>
      );
    }
  };

  const EmailBodyTemplate = (rowData: any) => {
    if (
      emailTemp1(rowData)
    ) {
      return <p>N/A</p>;
    } else {
      return <p>{emailTemp2(rowData)}</p>;
    }
  };

  const UsernameBodyTemplate = (rowData: any) => {
    if (
      usernameTempBody(rowData)
    ) {
      return (
        <>
          <div className="CustomerCulamnCss">N/A</div>
        </>
      );
    } else {
      return (
        <>
          <div className="CustomerCulamnCss">{username3(rowData)}</div>
        </>
      );
    }
  };
  const Request = (rowData: any) => {
    if (
      requestTemp(rowData)
    ) {
      return (
        <>
          <div className="CustomerCulamnCss">N/A</div>
        </>
      );
    } else {
      return (
        <>
          <div className="CustomerCulamnCss">{requestType1(rowData)}</div>
        </>
      );
    }
  };
  const claimRequestBodyTemplate = (rowData: any) => {
    return claimRequestBodyTem(rowData, handleAcceptClaimRequest, handleRejectClaimRequest);
  };

  const handleModalClose = () => {
    setModalActive(false);
    setModalValueSet(null);
    reset();
  };

  const validateInputSpace = (e: any) => {
    validSpace(e);
  };

  const {
    register,
    reset,
    handleSubmit,
    formState: { errors },
  } = useForm({
    resolver: yupResolver(validationSchema),
  });

  const claimMessage = (
    isLoading: any,
    claimType: any,
    claimedMessage: any,
    claimStatus: any,
  ) => {
    setIsloading(isLoading);
    const query = {
      name: "",
      cancel_reasons: "",
      reject_reasons: "",
      created_date:"",
      primary:"",
      username:"",
      is_reject:"",
      request_type:"",
      email:""
    };
    claimRequestDataGet(token, 1, query);
    swal(claimType, claimedMessage, claimStatus);
  };

  const onSubmitReasonComments = (dataObj: any) => {
    commentsScope(dataObj, setIsloading, token, setModalActive, setModalValueSet, reset, claimMessage);
  };

  const rejectClaimRequestModal = (
    <Modal show={isModalActive} centered size="lg">
      <div className="p-3 pb-0 text-center">
        <Modal.Title>Reject Request</Modal.Title>
        <hr />
      </div>
      <form onSubmit={handleSubmit(onSubmitReasonComments)}>
        <Modal.Body className="pt-0 pb-0">
          <div>
            <h3 className="mb-2">{toModalValueSet?.name}</h3>
            <div>
              <input
                type="hidden"
                {...register("carrier_name")}
                value={toModalValueSet?.name}
              />
              <input
                type="hidden"
                {...register("email")}
                value={toModalValueSet?.email}
              />
              <input
                type="hidden"
                {...register("carrier_id")}
                value={toModalValueSet?.carrier_id}
              />
              <input
                type="hidden"
                {...register("user_id")}
                value={toModalValueSet?.user_id}
              />
              <label className="mb-2">Reason for reject request</label>
              <textarea
                className="form-control"
                placeholder="Enter Comments"
                onKeyUp={(e) => validateInputSpace(e)}
                {...register("reason_comment")}
                error={rejectReasonErr(errors)}
              >
                Your request has been Rejected.
              </textarea>
              {RejectErr(errors)}
            </div>
          </div>
        </Modal.Body>
        <footer className="p-3">
          <hr />
          <div className="d-flex justify-content-end">
            <Button severity="primary" type="submit">
              Submit
            </Button>
            &nbsp;
            <a
              className="btn btn-secondary"
              style={{ textDecoration: "none" }}
              onClick={handleModalClose}
            >
              Close
            </a>
          </div>
        </footer>
      </form>
    </Modal>
  );

  const onSortChange = (e: any) => {
    setSortField(e.sortField);
    setSortOrder(e.sortOrder);
    customSort(e.sortField, e.sortOrder);
  };

  const customSort = (field: any, order: any) => {
    SortFunc(rateQuotesdata, order, field, setRateQuotesdata);
  };

  const handleAcceptClaimRequest = (dataObj: any) => {
    swal({
      title: "Are you sure?",
      text: "You want to approve this user request?",
      icon: "warning",
      dangerMode: true,
      buttons: {
        cancel: {
          text: "No, cancel",
          value: null,
          visible: true,
          className: "",
          closeModal: true,
        },
        confirm: {
          text: "Yes",
          value: true,
          visible: true,
          className: "",
          closeModal: true,
        },
      },
    }).then((willDelete) => {
      WillCondition(willDelete, updateClaimRequestStatus, dataObj, token);
    });
  };

  const updateClaimRequestStatus = async (dataObj: any, tokenNumber: any) => {
    const payloadObj: any = {
      user_id: dataObj.user_id,
    };
    setIsloading(true);

    toAcceptClaimRequest(payloadObj, tokenNumber).then((response) => {
      AcceptIf(response, claimMessage);
    });
  };

  const handleRejectClaimRequest = (dataObj: any) => {
    setModalActive(true);
    setModalValueSet(dataObj);
  };
  const [ClientFilterValue, setClientFilterValue] = useState("");
  const [ReasonFilterValue, setReasonFilterValue] = useState("");
    const [AdminFilterValue, setAdminFilterValue] = useState("");
    const [DateFilterValue, setDateFilterValue] = useState("");
    const [ApplicantFilterValue, setApplicantFilterValue] = useState("");
    const [claimFilterValue, setclaimFilterValue] = useState("");
    const [ApplicantEmailFilterValue, setApplicantEmailFilterValue] = useState("");
    const [RequesttypeFilterValue, setRequesttypeFilterValue] = useState("");
    const [username1FilterValue, setusername1FilterValue] = useState("");
   

  const ClientNameFilterChange = (e: any) => {
    setClientFilterValue(e.target.value);
    const query = {
         name: e.target.value,
         cancel_reasons: ReasonFilterValue,
         reject_reasons: AdminFilterValue,
         created_date:DateFilterValue,
         primary:ApplicantFilterValue,
         username:username1FilterValue,
         is_reject:claimFilterValue,
         request_type:RequesttypeFilterValue,
         email:ApplicantEmailFilterValue

 
    };
    setFirst(null)

    claimRequestDataGet(token,1, query);
  };
  const ReasonNameFilterChange = (e: any) => {
    setReasonFilterValue(e.target.value);
    const query = {
        name: ClientFilterValue,
        cancel_reasons: e.target.value,
        reject_reasons: AdminFilterValue,
        created_date:DateFilterValue,
        primary:ApplicantFilterValue,
        username:username1FilterValue,
        is_reject:claimFilterValue,
        request_type:RequesttypeFilterValue,
        email:ApplicantEmailFilterValue

 
    };
    setFirst(null)

    claimRequestDataGet(token,1, query);
  };
  const AdminFilterChange = (e: any) => {
    setAdminFilterValue(e.target.value);
    const query = {
        name: ClientFilterValue,
        cancel_reasons: ReasonFilterValue,
        reject_reasons: e.target.value,
        created_date:DateFilterValue,
        primary:ApplicantFilterValue,
        username:username1FilterValue,
        is_reject:claimFilterValue,
        request_type:RequesttypeFilterValue,
        email:ApplicantEmailFilterValue

   
    };
    setFirst(null)
    claimRequestDataGet(token,1, query);
  };
  const DateFilterChange = (e: any) => {
    let inputValue = e.target.value;
  
    inputValue = inputValue.replace(/\D/g, "");
  
    if (inputValue.length > 10) {
      inputValue = inputValue.slice(0, 10);
    }
  
    if (inputValue.length > 3 && inputValue.length <= 6) {
      inputValue = `${inputValue.slice(0, 3)}-${inputValue.slice(3)}`;
    } else if (inputValue.length > 6) {
      inputValue = `${inputValue.slice(0, 3)}-${inputValue.slice(3, 6)}-${inputValue.slice(6)}`;
    }
    setDateFilterValue(inputValue);
       const query = {
        name: ClientFilterValue,
        cancel_reasons: ReasonFilterValue,
        reject_reasons: AdminFilterValue,
        created_date:inputValue,
        primary:ApplicantFilterValue,
        username:username1FilterValue,
        is_reject:claimFilterValue,
        request_type:RequesttypeFilterValue,
        email:ApplicantEmailFilterValue

 
    };
    setFirst("")
    claimRequestDataGet(token,1, query);
  };



  const ApplicantFilterChange = (e: any) => {
    setApplicantFilterValue(e.target.value);
       const query = {
        name: ClientFilterValue,
        cancel_reasons: ReasonFilterValue,
        reject_reasons: AdminFilterValue,
        created_date:DateFilterValue,
         primary: e.target.value,
         username:username1FilterValue,
         is_reject:claimFilterValue,
         request_type:RequesttypeFilterValue,
         email:ApplicantEmailFilterValue

    };
    setFirst(null)
    claimRequestDataGet(token,1, query);
  };
 
  const claimFilterChange = (e: any) => {
    setclaimFilterValue(e.target.value);
       const query = {
        name: ClientFilterValue,
        cancel_reasons: ReasonFilterValue,
        reject_reasons: AdminFilterValue,
        created_date:DateFilterValue,
        primary:ApplicantFilterValue,
        username:username1FilterValue,
        is_reject:e.target.value,
        request_type:RequesttypeFilterValue,
        email:ApplicantEmailFilterValue
    };
    setFirst(null);

    claimRequestDataGet(token,1, query);
  };
  const ApplicantEmailFilterChange = (e: any) => {
    setApplicantEmailFilterValue(e.target.value);
       const query = {
        name: ClientFilterValue,
        cancel_reasons: ReasonFilterValue,
        reject_reasons: AdminFilterValue,
        created_date:DateFilterValue,
        primary:ApplicantFilterValue,
        username:username1FilterValue,
        is_reject:claimFilterValue,
        request_type:RequesttypeFilterValue,
         email:e.target.value
    };
    setFirst(null)

    claimRequestDataGet(token,1, query);
  };
  const RequesttypeFilterChange = (e: any) => {
    setRequesttypeFilterValue(e.target.value);
       const query = {
        name: ClientFilterValue,
        cancel_reasons: ReasonFilterValue,
        reject_reasons: AdminFilterValue,
        created_date:DateFilterValue,
        primary:ApplicantFilterValue,
        username:username1FilterValue,
        is_reject:claimFilterValue,
        request_type:e.target.value,
        email:ApplicantEmailFilterValue

    };
    setFirst(null)

    claimRequestDataGet(token,1, query);
  };
  const username1FilterChange = (e: any) => {
    setusername1FilterValue(e.target.value);
       const query = {
        name: ClientFilterValue,
        cancel_reasons: ReasonFilterValue,
        reject_reasons: AdminFilterValue,
        created_date:DateFilterValue,
        primary:ApplicantFilterValue,
        username:e.target.value,
        is_reject:claimFilterValue,
        request_type:RequesttypeFilterValue,
        email:ApplicantEmailFilterValue

    };
    setFirst(null)

    claimRequestDataGet(token,1, query);
  };
 
  const spacehandler = (event: { which: number; target: { value: string; }; preventDefault: () => void; }) => {
    if (event.which === 32 && event.target.value.trim() === "") {
      event.preventDefault();
    }
  };
  const quoteFilter = (
    <>
      <InputText
        className="form-control max-size "
        value={ClientFilterValue}
        onChange={ClientNameFilterChange}
        placeholder="Entered Carrier Name"
        onKeyDown={spacehandler}
      />
    </>
  );
  const reasonFilter = (
    <>
      <InputText
        className="form-control max-size"
        value={ReasonFilterValue}
        onChange={ReasonNameFilterChange}
        placeholder="FMCSA Legal Name"
        onKeyDown={spacehandler}
      />
    </>
  );

  const AdminFilter = (
    <>
      <InputText
       type='number'
        className="form-control max-size"
        value={AdminFilterValue}
        onChange={AdminFilterChange}
        placeholder="Entered DOT/MC"
        onKeyDown={spacehandler}
      />
    </>
  );
  const DateFilter = (
    <>
      <InputText
        className="form-control max-size"
        value={DateFilterValue}
        onChange={DateFilterChange}
        placeholder="Entered Phone Number"
        onKeyDown={spacehandler}
      />
    </>
  );
  const ApplicantFilter = (
    <>
      <InputText
        className="form-control max-size"
        value={ApplicantFilterValue}
        onChange={ApplicantFilterChange}
        placeholder="Primary Name"
        onKeyDown={spacehandler}
      />
    </>
  );
 
  const typevalue = [
    { name: "Select", value: "" },
    { name: "Accepted", value:2 },
    { name: "Rejected", value: 3},
    { name: "Pending", value:  1 },
  ];
  const Requesttypevalue = [
    { name: "Select", value:"" },
    { name: "Create", value:"Create" },
    { name: "Claim", value: "Claim" },

  ];
 

  const emailTypeFilter = (
    <>
      <InputText
        className="form-control max-size"
        value={ApplicantEmailFilterValue}
        onChange={ApplicantEmailFilterChange}
        placeholder="Applicant Email"
        onKeyDown={spacehandler}
      />
    </>
  );
  const requestTypeFilter = (
    <>
      
        <Dropdown
     value={RequesttypeFilterValue}
     onChange={RequesttypeFilterChange}
        placeholder="Request type"
    options={Requesttypevalue}
    optionLabel='name'
   className='form-control max-size'
        
      />
    </>
  );
  const usernameTypeFilter = (
    <>
      <InputText
        className="form-control max-size"
        value={username1FilterValue}
        onChange={username1FilterChange}
        placeholder="username"
        onKeyDown={spacehandler}
      />
    </>
  );
  const claimRequestActionTypeFilter = (
    <>
     <Dropdown
   value={claimFilterValue}
     onChange={claimFilterChange}
    options={typevalue}
    optionLabel='name'
   placeholder='Action'
   className='form-control max-size'
    
      />
    </>
  );
  return (
    jsxContent({ router, isloading, dt, header, rateQuotesdata, first, sortField, sortOrder, onSortChange, onPageChange, totalRecords, CarrierNameBodyTemplate, CarrierNameLegalTemplate, CarrierNameDOTemplate, CarrierNamePhoneTemplate, PrimaryNameBodyTemplate, visibleColumns, UsernameBodyTemplate, Request, EmailBodyTemplate, claimRequestBodyTemplate, rejectClaimRequestModal,quoteFilter,reasonFilter,AdminFilter,DateFilter,ApplicantFilter,requestTypeFilter,emailTypeFilter,usernameTypeFilter,claimRequestActionTypeFilter,clearFilter, perPageDataShow})
  );
}
export default ClaimRequestTable;
function AcceptIf(response: any, claimMessage: (isLoading: any, claimType: any, claimedMessage: any, claimStatus: any) => void) {
  if (response?.status === "success") {
    claimMessage(
      false,
      "Mail Sent!",
      "This request successfully approved!",
      "success"
    );
  } else {
    claimMessage(
      false,
      "Mail Sent Failed!",
      "Something went wrong!",
      "failed"
    );
  }
}

function WillCondition(willDelete: any, updateClaimRequestStatus: (dataObj: any, tokenNumber: any) => Promise<void>, dataObj: any, token: string | null | undefined) {
  if (willDelete) {
    updateClaimRequestStatus(dataObj, token);
  }
}

function SortFunc(rateQuotesdata: undefined, order: any, field: any, setRateQuotesdata) {
  if (Array.isArray(rateQuotesdata)) {
    const sortedData: any = [...rateQuotesdata];
    sortedData.sort((a: any, b: any) => {
      if (order === 1) {
        return a[field] > b[field] ? 1 : -1;
      } else {
        return b[field] > a[field] ? 1 : -1;
      }
    });
    setRateQuotesdata(sortedData);
  }
}

function RejectErr(errors) {
  return errors.reason_comment && (
    <div className="alert alert-danger mt-2">
      {errors.reason_comment.message}
    </div>
  );
}

function rejectReasonErr(errors) {
  return errors.reason_comment ? true : false;
}

function commentsScope(dataObj: any, setIsloading, token: string | null | undefined, setModalActive, setModalValueSet, reset, claimMessage: (isLoading: any, claimType: any, claimedMessage: any, claimStatus: any) => void) {
  const payloadObj: any = {
    user_id: dataObj.user_id,
    message: dataObj.reason_comment,
  };
  setIsloading(true);
  toRejectClaimRequest(token, payloadObj).then((response) => {
    if (response?.status === "success") {
      setModalActive(false);
      setModalValueSet(null);
      reset();
      claimMessage(false, "Request Rejected!", response.message, "success");
    } else {
      setModalActive(false);
      setModalValueSet(null);
      reset();
      claimMessage(false, "Failed!", "Something went wrong!", "failed");
    }
  });
}

function validSpace(e: any) {
  if (/^\s/.test(e.target.value)) {
    e.target.value = e.target.value.replace(/^\s/gm, "");
    e.preventDefault();
  }
}

function claimRequestBodyTem(rowData: any, handleAcceptClaimRequest: (dataObj: any) => void, handleRejectClaimRequest: (dataObj: any) => void) {
  let statusButton;
  
  if (rowData.is_claimed === 2) {
    statusButton = (
      <button className="btn btn-sm btn-secondary">
        <i className="bi bi-check"></i>&nbsp;Accepted
      </button>
    );
  } else if (rowData.is_claimed === 1) {
    statusButton = (
      <div className="together-class">
        <button
          className="btn btn-sm btn-success"
          onClick={() => handleAcceptClaimRequest(rowData)}
        >
          <i className="bi bi-check"></i>&nbsp;Accept
        </button>
        &nbsp;
        <button
          className="btn btn-sm btn-warning"
          onClick={() => handleRejectClaimRequest(rowData)}
        >
          <i className="bi bi-x-circle"></i>&nbsp;Reject
        </button>
      </div>
    );
  } else {
    statusButton = (
      <button className="btn btn-sm btn-danger ">
        <i className="bi bi-x-circle"></i>&nbsp;Rejected
      </button>
    );
  }
  return statusButton;
}

function requestType1(rowData: any) {
  return rowData?.request_type;
}

function requestTemp(rowData: any) {
  return rowData.request_type === undefined ||
    rowData.request_type === null ||
    rowData.request_type == "";
}

function username3(rowData: any) {
  return rowData?.username;
}

function usernameTempBody(rowData: any) {
  return rowData.username === undefined ||
    rowData.username === null ||
    rowData.username == "";
}

function emailTemp2(rowData: any) {
  return rowData.email;
}

function emailTemp1(rowData: any) {
  return rowData.email === undefined ||
    rowData.email === null ||
    rowData.email == "";
}

function primaryTemp2(rowData: any) {
  return rowData?.name;
}

function primaryTemp1(rowData: any) {
  return rowData.name === undefined ||
    rowData.name === null ||
    rowData.name == "" ||
    rowData.name === "NULL";
}

function rowTemp(rowData: any) {
  const formatPhoneNumber = (phone: string) => {
    const digits = phone.replace(/\D/g, '');

    let formatted = '';

    if (digits.length === 10) {
      formatted = digits.replace(/(\d{3})(\d{3})(\d{4})/, '$1-$2-$3');
    }
    else if (digits.length === 9) {
      formatted = digits.replace(/(\d{3})(\d{3})(\d{3})/, '$1-$2-$3');
    }
    else if (digits.length > 10) {
      formatted = digits.slice(0, 10).replace(/(\d{3})(\d{3})(\d{4})/, '$1-$2-$3');
      formatted += digits.slice(10);
    }
    else {
      if (digits.length > 3) {
        formatted = digits.replace(/(\d{3})(?=\d)/g, '$1-');
      } else {
        formatted = digits;
      }
    }

    return formatted;
  };
  return formatPhoneNumber(rowData?.phone);
}

function phoneTemp(rowData: any) {
  return rowData.phone === undefined ||
    rowData.phone === null ||
    rowData.phone == "" ||
    rowData.phone === "NULL";
}

function rowTempData1(rowData: any) {
  return rowData?.dot_number ? rowData?.dot_number : "N/A";
}

function rowTempData(rowData: any) {
  return rowData?.mc_number ? rowData?.mc_number : 'N/A';
}

function dotTemp1(rowData: any) {
  return rowData.dot_number === undefined ||
    rowData.dot_number === null ||
    rowData.dot_number == "" ||
    rowData.dot_number === "NULL";
}

function legalTemp(rowData: any) {
  return rowData.leagal_name === undefined ||
    rowData.leagal_name === null ||
    rowData.leagal_name == "" ||
    rowData.leagal_name === "NULL";
}

function templateCarrier(rowData: any) {
  return rowData.billing_company === undefined ||
    rowData.billing_company === null ||
    rowData.billing_company == "" ||
    rowData.billing_company === "NULL";
}

function claimRequest(setTotalRecords: any, setRateQuotesdata: any, setPerPageDataShow: any) {
  return (response: any) => {
    if (response?.status === "success") {
      setPerPageDataShow(response?.meta?.per_page);
      setTotalRecords(response?.meta?.total);
      setRateQuotesdata(response?.data);
    } else {
      // Handle error condition
    }
  };
}

function queryparam(query: any) {
  
  return {
    billing_company: query?.name || "",
    leagal_name:query?.cancel_reasons || "",
    dot_number:query?.reject_reasons || "",
    phone:query?.created_date.replace(/\D/g, "") || "",
     name: query?.primary || "",
     email:query?.email ||"",
   request_type:query?.request_type || "",
   username:query?.username || "",
   is_claimed:query?.is_reject
  };
}

function jsxContent({ router, isloading, dt, header, rateQuotesdata, first, sortField, sortOrder, onSortChange, onPageChange, totalRecords, CarrierNameBodyTemplate, CarrierNameLegalTemplate, CarrierNameDOTemplate, CarrierNamePhoneTemplate, PrimaryNameBodyTemplate, visibleColumns, UsernameBodyTemplate, Request, EmailBodyTemplate, claimRequestBodyTemplate, rejectClaimRequestModal,quoteFilter,reasonFilter,AdminFilter,DateFilter,ApplicantFilter,requestTypeFilter,emailTypeFilter,usernameTypeFilter,claimRequestActionTypeFilter,clearFilter, perPageDataShow }: { router; isloading: boolean; dt; header: JSX.Element; rateQuotesdata: undefined; first: number; sortField: string; sortOrder: null; onSortChange: (e: any) => void; onPageChange: (event: any) => void; totalRecords: number; CarrierNameBodyTemplate: any; CarrierNameLegalTemplate: any; CarrierNameDOTemplate: any; CarrierNamePhoneTemplate: any; PrimaryNameBodyTemplate: any; visibleColumns: { field: string; header: string; }[]; UsernameBodyTemplate: (rowData: any) => JSX.Element; Request: (rowData: any) => JSX.Element; EmailBodyTemplate: (rowData: any) => JSX.Element; claimRequestBodyTemplate: (rowData: any) => JSX.Element; rejectClaimRequestModal: JSX.Element;quoteFilter:any;reasonFilter:any;AdminFilter:any;DateFilter:any;ApplicantFilter:any;requestTypeFilter:any;emailTypeFilter:any;usernameTypeFilter:any;claimRequestActionTypeFilter:any ;clearFilter:any; perPageDataShow: any;}) {
  return <>
    <div  className="random-back">
    <Button
                    className="divStylecss-update"
                type='button'
                icon='pi pi-filter-slash'
                label='Clear'
                onClick={clearFilter} />
      <Button onClick={() => router.push("/users")} type="button" className="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>
      <ToastContainer />
      <div className="userManaagementheader">
        <div className="form-group secDiv">
          {isloading && (
            <div id="loader_table">
              <ScaleLoader color="#3180f3" className="table_loader" />
            </div>
          )}
          <>
            <div className="datatable-filter-demo">
              <div className="card table_height">
                <DataTable
                  lazy
                  ref={dt}
                  header={header}
                  filterDisplay="row"
                  value={rateQuotesdata}
                  paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport"
                  first={first}
                  rows={10}
                  sortField={sortField}
                  sortOrder={sortOrder}
                  onSort={onSortChange}
                  onPage={(e) => {
                    onPageChange(e);
                  } }
                  totalRecords={totalRecords}
                  emptyMessage="No record found."
                >
                  <Column
                  className="table-header "
                    key={rateQuotesdata}
                    sortable
                    field="billing_company"
                    header="Entered Carrier Name"
                    filter
                    filterElement={quoteFilter}
                    body={CarrierNameBodyTemplate} />
                  <Column
                    key={rateQuotesdata}
                    sortable
                    field="leagal_name"
                    header="FMCSA Legal Name"
                    filterElement={reasonFilter}
                    filter
                    body={CarrierNameLegalTemplate} />
                  <Column
                    key={rateQuotesdata}
                    sortable
                    field="dot_number"
                    header="Entered DOT/MC"
                    body={CarrierNameDOTemplate}
                    filterElement={AdminFilter}
                    filter
                    />
                  <Column
                    key={rateQuotesdata}
                    sortable
                    field="phone"
                    header="Entered Phone Number"
                    body={CarrierNamePhoneTemplate} 
                    filterElement={DateFilter}
                                        filter
                    />
                  <Column
                    key={rateQuotesdata}
                    sortable
                    field="name"
                    header="Primary Name"
                    body={PrimaryNameBodyTemplate} 
                    filterElement={ApplicantFilter}
                                        filter
                    />
                  {visibleColumns.map((col) => {
                    const filterElementMap = {
                      requestType:requestTypeFilter,
                      email:emailTypeFilter,
                      username:usernameTypeFilter,
                      claimRequestAction:claimRequestActionTypeFilter,
                    };
                    const bodyTemplateMap: any = {
                      username: UsernameBodyTemplate,
                      requestType: Request,
                      email: EmailBodyTemplate,
                      claimRequestAction: claimRequestBodyTemplate,
                    };
                    return (
                      <Column
                        sortable
                        key={col.field}
                        field={col.field}
                        header={col.header}
                        filter
                        filterElement={filterElementMap[col.field]}
                        body={bodyTemplateMap[col.field]} />
                    );
                  })}
                </DataTable>
                <div className="pagination_footer">
                  <PaginationTitle first={first} totalRecords={totalRecords} perPageData={perPageDataShow}/>
                  <Paginator
                    rows={10}
                    first={first}
                    totalRecords={totalRecords}
                    onPageChange={onPageChange} />
                </div>
                </div>
            </div>
          </>
        </div>
      </div>
      {rejectClaimRequestModal}
    </div>

  </>;
}