import { useEffect, useState, useRef } from "react";
import { ScaleLoader } from "react-spinners";
import { DataTable } from "primereact/datatable";
import { Column } from "primereact/column";
import { Dropdown } from "primereact/dropdown";
import {  DatePicker } from "rsuite";
import "react-datepicker/dist/react-datepicker.css";
import moment from "moment";
import { useSession } from "next-auth/react";
import "primereact/resources/primereact.css";
import "primereact/resources/themes/saga-blue/theme.css";
import "primeicons/primeicons.css";
import { useRouter } from "next/router";
import "rsuite/dist/rsuite.min.css";
import { InputText } from "primereact/inputtext";

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 {
    getAllCancelRequestList,
    toAcceptCancelRequest,
    toRejectCancelRequest,
} 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 CancelRequestTable(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 [perPageDataShow, setPerPageDataShow] = useState(0);
    const router = useRouter()
    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]);
    const columns = [

        { field: "claimRequestAction", header: "Action" },
    ];
    const [visibleColumns] = useState(columns);

    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(""),
    });

    //Get List of users
    const claimRequestDataGet = (
        pageno: any,
        page: number,
        query: any | null = null,
    ) => {
        setIsloading(true);
        const queryparams = buildQueryParam(query);        
        getAllCancelRequestList(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);
    };


    useEffect(() => {
        const query = {
            name: "",
            email: "",
            username: "",
            cancel_reasons:"",
            reject_reasons:"",
            created_date:"",
            is_reject:""
        };
        claimRequestDataGet(token, 1, query);
        setListingRef(false);
    }, [listingref, token]);


    const clearFilter=()=>{
        setClientFilterValue("")
         setReasonFilterValue ("")
           setAdminFilterValue ("")
            setDateFilterValue  (null)
            setApplicantFilterValue ("")
             setUsernameFilterValue  ("")
             setclaimFilterValue("")
             setFirst(1)
             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 cancellation Request</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,
            email:ApplicantFilterValue,
            username:UsernameFilterValue,
            is_reject:claimFilterValue
        };
        claimRequestDataGet(token, perpage, query);
    };

    const CarrierNameBodyTemplate: any = (rowData: any) => {

        if (
            templateCarrier(rowData)
        ) {
            return (
                <>
                    <div className="CustomerCulamnCss">
                        <span >N/A</span>
                    </div>
                </>
            );
        } else {
            return (
                <>
                    <div className="CustomerCulamnCss  ">
                        <span className=" break-name">
                            {rowData?.name}
                        </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">{rowData?.cancel_reasons}</p>
                    </div>
                </>
            );
        }
    };
    const RejectTemplate: any = (rowData: any) => {
        if (
            RejTemp(rowData)
        ) {
            return (
                <>
                    <div className="CustomerCulamnCss">
                        <p>N/A</p>
                    </div>
                </>
            );
        } else {
            return (
                <>
                    <div className="CustomerCulamnCss">
                        <p className="break">{rowData?.reject_reasons}</p>
                    </div>
                </>
            );
        }
    };
    const DateTemplate: any = (rowData: any) => {
        if (
            DateTemp(rowData)
        ) {
            return (
                <>
                    <div className="CustomerCulamnCss">
                        <p>N/A</p>
                    </div>
                </>
            );
        } else {
            return (
                <>
                    <div className="CustomerCulamnCss">
                        <p className="break">{rowData?.created_date}</p>
                    </div>
                </>
            );
        }
    };

    const CarrierNameDOTemplate: any = (rowData: any) => {
        if (
            dotTemp1(rowData)
        ) {
            return (
                <>
                    <div className="CustomerCulamnCss">
                        <p className="break">{rowTempData(rowData)}</p>
                    </div>
                </>
            );
        } else {
            return (
                <>
                    <div className="CustomerCulamnCss">
                        <p className="break">{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 className="break">{rowTemp(rowData)}</p>
                    </div>
                </>
            );
        }
    };
    const PrimaryNameBodyTemplate: any = (rowData: any) => {
        if (
            primaryTemp1(rowData)
        ) {
            return (
                <>
                    <p>N/A</p>
                </>
            );
        } else {
            return (
                <>
                    <p className="break">{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 break">{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: "",
            email: "",
            username: "",
            cancel_reasons:"",
            reject_reasons:"",
            created_date:"",
             is_reject:""
        };
        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><h3>Please enter the reason for denial</h3></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("id")}
                                value={toModalValueSet?.id}
                            />

                            <textarea
                                className="form-control textAreaCancel"
                                placeholder="Please share your response for denial."
                                onKeyUp={(e) => validateInputSpace(e)}
                                {...register("reason_comment")}
                                error={rejectReasonErr(errors)}
                            />

                            {RejectErr(errors)}
                        </div>
                    </div>
                </Modal.Body>
                <footer className="p-3">
                    <hr />
                    <div className="d-flex justify-content-center" style={{ gap: "20px", marginRight: "-54px" }}>
                    
                        <Button severity="primary" type="submit">
                            Submit
                        </Button>
                    </div>
                </footer>
            </form>
            <div className=" only_cancel">
                &nbsp;
                <Button
                    className="cancel-button-style"
                    onClick={() => handleModalClose()}
                >
                    Cancel
                </Button>
            </div>
        </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);
        });
    };

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

        toAcceptCancelRequest(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(null);
    const [ApplicantFilterValue, setApplicantFilterValue] = useState("");
    const [UsernameFilterValue, setUsernameFilterValue] = useState("");
    const [claimFilterValue, setclaimFilterValue] = useState("");

    const ClientNameFilterChange = (e: any) => {
        setClientFilterValue(e.target.value);
        const query = {
            name: e.target.value,
             cancel_reasons: ReasonFilterValue,
             reject_reasons: AdminFilterValue,
             created_date:DateFilterValue,
             email:ApplicantFilterValue,
             username:UsernameFilterValue,
             is_reject:claimFilterValue
        };
        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,
            email:ApplicantFilterValue,
            username:UsernameFilterValue,
            is_reject:claimFilterValue
        };
        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,
            email:ApplicantFilterValue,
            username:UsernameFilterValue,
            is_reject:claimFilterValue
        };
        setFirst(null)
        claimRequestDataGet(token,1, query);
      };
   
      const handleDateChange = (date: any) => {
        setDateFilterValue(date);
        const query = {
          name: ClientFilterValue,
          cancel_reasons: ReasonFilterValue,
          reject_reasons: AdminFilterValue,
          created_date: date,
          email: ApplicantFilterValue,
          username: UsernameFilterValue,
          is_reject: claimFilterValue,
        };
        setFirst(null)
        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,
             email: e.target.value,
             username:UsernameFilterValue,
             is_reject:claimFilterValue

      
        };
        setFirst(null)
        claimRequestDataGet(token,1, query);
      };
      const UsernameFilterChange = (e: any) => {
        setUsernameFilterValue(e.target.value);
           const query = {
            name: ClientFilterValue,
            cancel_reasons: ReasonFilterValue,
            reject_reasons: AdminFilterValue,
            created_date:DateFilterValue,
            email:ApplicantFilterValue,
            username:e.target.value,
            is_reject:claimFilterValue
       
        };
        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,
            email:ApplicantFilterValue,
            username:UsernameFilterValue,
            is_reject:e.target.value,
       
        };
        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="Client Name"
            onKeyDown={spacehandler}
          />
        </>
      );
      const reasonFilter = (
        <>
          <InputText
            className="form-control max-size"
            value={ReasonFilterValue}
            onChange={ReasonNameFilterChange}
            placeholder="Reason for cancellation"
            onKeyDown={spacehandler}
          />
        </>
      );
      const AdminFilter = (
        <>
          <InputText
            className="form-control max-size"
            value={AdminFilterValue}
            onChange={AdminFilterChange}
            placeholder="Admin comment"
            onKeyDown={spacehandler}
          />
        </>
      );
      const DateFilter = (
        <>
      <DatePicker
      format='MM-dd-yyyy'
      onChange={handleDateChange}
      value={DateFilterValue}
      size='lg'
      placeholder='MM-DD-YYYY'
      style={{width:"max-content",border:"none",fontSize: "1rem",
        fontWeight: "400",
        lineHeight: "1.5"}}
    />
        </>
      );
      const ApplicantFilter = (
        <>
          <InputText
            className="form-control max-size"
            value={ApplicantFilterValue}
            onChange={ApplicantFilterChange}
            placeholder="Applicant email"
            onKeyDown={spacehandler}
          />
        </>
      );
      const UsernameFilter = (
        <>
          <InputText
            className="form-control max-size"
            value={UsernameFilterValue}
            onChange={UsernameFilterChange}
            placeholder="Username"
            onKeyDown={spacehandler}
          />
        </>
      );
      const typevalue = [
        { name: "Select", value: "" },
        { name: "Approved", value:2 },
        { name: "Rejected", value: 1 },
        { name: "Pending", value: 0 },
      ];
      const claimFilter = (
        <>
         <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, RejectTemplate, DateTemplate, CarrierNameDOTemplate, CarrierNamePhoneTemplate, PrimaryNameBodyTemplate, visibleColumns, UsernameBodyTemplate, Request, EmailBodyTemplate, claimRequestBodyTemplate, rejectClaimRequestModal,quoteFilter,reasonFilter,AdminFilter,DateFilter,ApplicantFilter,UsernameFilter,claimFilter,clearFilter, perPageDataShow})
    );
}
export default CancelRequestTable;
function AcceptIf(response: any, claimMessage: (isLoading: any, claimType: any, claimedMessage: any, claimStatus: any) => void) {

    if (response?.original?.status === "success") {
        claimMessage(
            false,
            response?.message,
            response?.message,
            "success"
        );
    }
}

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

function SortFunc(rateQuotesdata: undefined, order: any, field: any, setRateQuotesdata: { (value: SetStateAction<undefined>): void; (arg0: any): void; }) {
    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: FieldErrors<{ carrier_name?: any; carrier_id?: any; email?: any; reason_comment: string; }>) {
    return errors.reason_comment && (
        <div className="alert alert-danger mt-2">
            {errors.reason_comment.message}
        </div>
    );
}

function rejectReasonErr(errors: FieldErrors<{ carrier_name?: any; carrier_id?: any; email?: any; reason_comment: string; }>) {
    return errors.reason_comment ? true : false;
}

//Reject User Request
function commentsScope(dataObj: any, setIsloading: { (value: SetStateAction<boolean>): void; (arg0: boolean): void; }, token: any, setModalActive: { (value: SetStateAction<boolean>): void; (arg0: boolean): void; }, setModalValueSet: { (value: SetStateAction<RowDataCarrier | null>): void; (arg0: null): void; }, reset: { (values?: { carrier_name?: any; carrier_id?: any; email?: any; reason_comment: string; } | { carrier_name?: any; carrier_id?: any; email?: any; reason_comment?:any } | ((formValues: { carrier_name?: any; carrier_id?: any; email?: any; reason_comment: string; }) => { carrier_name?: any; carrier_id?: any; email?: any; reason_comment: string; }) | undefined, keepStateOptions?: Partial<{ keepDirtyValues: boolean; keepErrors: boolean; keepDirty: boolean; keepValues: boolean; keepDefaultValues: boolean; keepIsSubmitted: boolean; keepIsSubmitSuccessful: boolean; keepTouched: boolean; keepIsValidating: boolean; keepIsValid: boolean; keepSubmitCount: boolean; }> | undefined): void; (): void; }, claimMessage: (isLoading: any, claimType: any, claimedMessage: any, claimStatus: any) => void) {
    const payloadObj: any = {
        id: dataObj.id,
        reject_reasons: dataObj.reason_comment,
    };
    setIsloading(true);
    toRejectCancelRequest(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, handleDeleteClaimRequest: (dataObj: any) => void, handleRejectClaimRequest: (dataObj: any) => void) {
    let statusButton;

    if (rowData.is_reject === 2) {
        statusButton = (
            <button className="btn btn-sm btn-secondary">
                <i ></i>&nbsp;Approved
            </button>
        );
    }
    else if (rowData.is_reject === 1) {
        statusButton = (
            <button className="btn btn-sm btn-danger">
                <i ></i>&nbsp;Rejected
            </button>
        );
    }
    else if (rowData.is_reject === 0) {
        statusButton = (
            <>
                <div className="approveClass">
                    <div className="d-flex justify-content-start">
                    <button
                        className="btn btn-sm btn-success"
                        onClick={() => handleAcceptClaimRequest(rowData)}
                    >
                        <i ></i>&nbsp;Approve
                    </button>

                </div><div className="d-flex justify-content-start">
                        <button
                            className="btn btn-sm btn-danger"
                            onClick={() => handleDeleteClaimRequest(rowData)}
                        >
                            &nbsp;Reject
                        </button>

                    </div></div>
            </>
        );
    }
    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 tempCarr32(rowData);

}

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

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

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

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

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

function legalTemp(rowData: any) {
    return rowData.cancel_reasons === undefined ||
        rowData.cancel_reasons === null ||
        rowData.cancel_reasons == "" ||
        rowData.cancel_reasons === "NULL";
}
function RejTemp(rowData: any) {
    return rowData.reject_reasons === undefined ||
        rowData.reject_reasons === null ||
        rowData.reject_reasons == "" ||
        rowData.reject_reasons === "NULL";
}
function DateTemp(rowData: any) {
    return rowData.created_date === undefined ||
        rowData.created_date === null ||
        rowData.created_date == "" ||
        rowData.created_date === "NULL";
}
function templateCarrier(rowData: any) {
    return tempCarr(rowData);
}

function tempCarr(rowData: any) {
    return tempCarr32(rowData);
}

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

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

function queryparam(query: any) {
    let formattedDate = query?.created_date  ? moment(query?.created_date )?.format("YYYY-MM-DD") : "";

    return {
        name: query?.name || "",
       
        cancel_reasons:query?.cancel_reasons || "",
        reject_reasons:query?.reject_reasons || "",
        created_date:formattedDate || "",
         email: query?.email || "",
        username:query?.username,
         is_reject:query?.is_reject
    };
}

function jsxContent({ router, isloading, dt, header, rateQuotesdata, first, sortField, sortOrder, onSortChange, onPageChange, totalRecords, CarrierNameBodyTemplate, CarrierNameLegalTemplate, RejectTemplate, DateTemplate, CarrierNameDOTemplate, CarrierNamePhoneTemplate, PrimaryNameBodyTemplate, visibleColumns, UsernameBodyTemplate, Request, EmailBodyTemplate, claimRequestBodyTemplate, rejectClaimRequestModal,quoteFilter,reasonFilter, AdminFilter,DateFilter,ApplicantFilter,UsernameFilter,claimFilter,clearFilter, perPageDataShow}: { router: any; isloading: boolean; dt: any; 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; RejectTemplate: 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,AdminFilter:any,DateFilter:any,ApplicantFilter:any,UsernameFilter:any,claimFilter: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="btn btn-primary 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}
                                    filterDisplay="row"
                                    header={header}
                                    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
                                        key={rateQuotesdata}
                                        sortable
                                        field="Carrier Name"
                                        header="Client Name"
                                        filter
                                        filterElement={quoteFilter}
                                        body={CarrierNameBodyTemplate} />       
                                    <Column
                                        key={rateQuotesdata}
                                        sortable
                                        field="Request For Cancelation"
                                        header="Reason for cancellation"
                                       filterElement={reasonFilter}
                                       filter
                                        body={CarrierNameLegalTemplate} />
                                    <Column
                                        key={rateQuotesdata}
                                        sortable
                                        field="Admin Comment"
                                        header="Admin Comment"
                                        filterElement={AdminFilter}
                                         filter
                                        body={RejectTemplate} />
                                    <Column
                                        key={rateQuotesdata}
                                        sortable
                                        field="Date"
                                        header="Date"
                                        filterElement={DateFilter}
                                        filter
                                        body={DateTemplate} />
                                    <Column
                                        key={rateQuotesdata}
                                        sortable
                                        field="Applicant Email"
                                        header="Applicant Email"
                                        filterElement={ApplicantFilter}
                                        filter
                                        body={CarrierNameDOTemplate} />

                                    <Column
                                        key={rateQuotesdata}
                                        sortable
                                        field="Phone"
                                        header="Username"
                                        filterElement={UsernameFilter}
                                        filter
                                        body={CarrierNamePhoneTemplate} />
                                        <Column
                                        key={rateQuotesdata}
                                        sortable
                                        field="claimRequestAction"
                                        header="Action"
                                        filterElement={claimFilter}
                                        filter
                                        body={claimRequestBodyTemplate} />
                                   
                                </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>

    </>;
}