Notes

import { Button } from "@qbe/ui-core";
import { useNavigate } from 'react-router-dom';
import { PolicyStatusBtn } from "../../../Components/PolicyStatusButton/PolicyStatusBtn";
import { useEffect, useState } from 'react';
import { useGetUserMutation } from "../../../Redux/Apis/userApi";
import { useGetPolicyMutation } from "../../../Redux/Apis/policyApi";
import { useGetPaymentMutation } from "../../../Redux/Apis/paymentApi";
import DropdownArrow from '../../../Assets/Icon/DropdownArrow.svg';
// import UpArrow from '../../../Assets/Icon/UpArrow.svg';
import UpArrowArrowUpdropdown from '../../../Assets/Icon/ArrowUpdropdown.svg';
import "./DataTable.css";
import Loader from "../../Loader";


export const DataTable = (props) => {
const { columns = [], activeTab, onRowUpdate } = props;
const [rows, setRows] = useState([]);
const [currentPage, setCurrentPage] = useState(1);
const [pageSize, setPageSize] = useState(10);
const [LastPage, setLastPage] = useState(1);
const [sortOrder, setSortOrder] = useState("DESC");
const [activeSortColumn, setActiveSortColumn] = useState("account_name");
const [totalRows, setTotalRows] = useState();


const navigate = useNavigate();
const [getUser, { isLoading, isSuccess, isError }] = useGetUserMutation();
const [getPolicy] = useGetPolicyMutation();
const [getPayment] = useGetPaymentMutation();

const fetchData = async (sortColumn = activeSortColumn, order = sortOrder) => {
let data = [];
let params = { pageSize, currentPage, sortOrder: order, activeSortColumn: sortColumn };

switch (activeTab) {
case "Accounts":
const userData = await getUser(params).unwrap();
data = userData.users;
setRows(data);
setTotalRows(userData.totalRows);
setLastPage(Math.ceil(userData.totalRows / pageSize));
break;
case "Policies":
const policyData = await getPolicy(params).unwrap();
data = policyData.policy;
setRows(data);
setTotalRows(policyData.totalRows);
setLastPage(Math.ceil(policyData.totalRows / pageSize));
break;
case "Payments":
const paymentData = await getPayment(params).unwrap();
data = paymentData.payments;
setRows(data);
setTotalRows(paymentData.totalRows);
setLastPage(Math.ceil(paymentData.totalRows / pageSize));
break;
default:
break;
}

// Pass updated rows to the parent if needed
if (onRowUpdate) {
onRowUpdate(data);
}
};

useEffect(() => {
fetchData();
}, [activeTab, currentPage, pageSize, activeSortColumn, sortOrder]);

const handleSortOrderToggle = (columnId) => {
let newSortOrder = "ASC"; // Default to ASC on column click
if (activeSortColumn === columnId) {
// Toggle order if the same column is clicked
newSortOrder = sortOrder === "ASC" ? "DESC" : "ASC";
}

// Update state and immediately trigger sorting
setActiveSortColumn(columnId);
setSortOrder(newSortOrder);

// Manually call fetchData with updated params to ensure sorting is applied
fetchData(columnId, newSortOrder);
};

const handlePreviousPage = () => {
if (currentPage > 1) {
setCurrentPage(currentPage - 1);
}
};

const handleNextPage = () => {
if (currentPage < LastPage) {
setCurrentPage(currentPage + 1);
}
};

const handlelastPage = () => setCurrentPage(LastPage);
const handleFirstPage = () => setCurrentPage(1);
const handlePagesize = (event) => setPageSize(event.target.value);

const renderPolicyStatusBtn = (row) => (
<td style={{ width: `${100 / columns.length}%` }} className="custom-td">
<PolicyStatusBtn policyStatus={row.status} />
</td>
);

const renderAccountStatusBtn = (row) => (
<td style={{ width: `${100 / columns.length}%` }} className="custom-td" >
<PolicyStatusBtn policyStatus={row.isActive ? "Active" : "Inactive"} />
</td>
);

const renderAccountName = (row) => (
<td style={{ width: `${100 / columns.length}%` }} className="custom-td">
<a className="account-name-link" >{row.firstName + ' ' + row.lastName}</a>
</td>
);

const renderViewAccountBtn = (row) => {
return (
<td className="custom-td" style={{ minWidth: `${20}%` }}>
<Button
label="View account"
size="small"
variant="secondary-on-light"
onClick={() => navigate("/policydashboard", { state: row })}
/>
</td>)
}

const renderViewPolicyBtn = (row) => (
<td className="custom-td" style={{ width: `${100 / columns.length}%` }}>
<Button
label="View Policy"
size="small"
variant="secondary-on-light"
onClick={() => navigate("/policydashboard/policydetails", { state: row })}
/>
</td>
);

const renderViewInvoice = (row) => (
<td style={{ width: `${100 / columns.length}%` }} className="custom-td deny-btn">
View Invoice
</td>
);

const renderSortIcon = (columnId) => {
if (columnId === activeSortColumn) {
// Show an up arrow for ASC and a down arrow for DESC
return (
<img
src={sortOrder === "ASC" ? UpArrowArrowUpdropdown : DropdownArrow}
alt={sortOrder === "DESC" ? "Ascending" : "Descending"}
className="dropdown-arrow"
/>
);
}

return (
<img
src={DropdownArrow}
alt="Inactive Sort Arrow"
className="dropdown-arrow"
style={{ filter: "grayscale(100%)", opacity: 0.5 }}
/>
);
};

return (
<>
<div className="data-table-container">
<table className="table table-hover">
<thead className="thead">
<tr className="table-header-row">
{columns.map((column) => (
<th key={column.id} style={{ width: `${100 / columns.length}%` }} className="custom-thead">
<span>{column.name}</span>
{["account_name", "Account name", "policies", "createdAt", "request", "isActive", "policyHolderName"].includes(column.id) && (
<span onClick={() => handleSortOrderToggle(column.id)} style={{ cursor: "pointer" }}>
{renderSortIcon(column.id)}
</span>
// style={{
// cursor: "pointer",
// filter: activeSortColumn === column.id ? 'none' : 'grayscale(100%)',
// }}
// />
)}
</th>
))}
</tr>
</thead>
<tbody>

{isLoading ? (<Loader />) :

Array.isArray(rows) && rows.map((row) => {
return (
<tr>
{columns.map(column => {

switch (column.id) {
case "isActive":
return renderAccountStatusBtn(row);
case "status":
return renderPolicyStatusBtn(row);
case "account_name":
return renderAccountName(row);
case "view_policy":
return renderViewPolicyBtn(row);
case "view_account":
return renderViewAccountBtn(row);
case "view_invoice":
return renderViewInvoice(row);
default:
return <td style={{ width: `${100 / columns.length}%` }} className="custom-td">{row[column.id]}</td>;
}
})}
</tr>

)
})
}


</tbody>
</table>
</div>
<div className="datatable-pagination">
<div className="total-pages">
<p className="pagination-font-style">
{currentPage * pageSize - (pageSize - 1)}-{Math.min(currentPage * pageSize, totalRows)} of {totalRows}
</p>
<p className="ml-4 pagination-font-style">
Rows per page
<select value={pageSize} className="page-number" onChange={handlePagesize}>
<option value={10}>10</option>
<option value={20}>20</option>
<option value={30}>30</option>
<option value={40}>40</option>
</select>
</p>
</div>
<div className="pagination-next-previous">
<svg xmlns="http://www.w3.org/2000/svg" width="25px" height="17px" onClick={handleFirstPage} viewBox="0 0 20 20"><path d="M6 4a1 1 0 011 1v10a1 1 0 11-2 0V5a1 1 0 011-1zm7.219.376a1 1 0 111.562 1.249L11.28 10l3.5 4.375a1 1 0 11-1.562 1.249l-4-5a1 1 0 010-1.25l4-5z" fill="#B0B7C3" /></svg>

<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="12px" fill="#B0B7C3" class="bi bi-chevron-left" viewBox="0 0 16 16" onClick={handlePreviousPage}>
<path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0" />
</svg>
<span className="active-page">{currentPage}</span>
<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="12px" fill="#B0B7C3" class="bi bi-chevron-right" viewBox="0 0 16 16" onClick={handleNextPage}>
<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="25px" height="17px" onClick={handlelastPage} viewBox="0 0 20 20"><path d="M14 4a1 1 0 011 1v10a1 1 0 11-2 0V5a1 1 0 011-1zm-7.219.376l4 5a1 1 0 010 1.249l-4 5a1 1 0 11-1.562-1.25l3.5-4.374-3.5-4.376a1 1 0 111.562-1.25z" fill="#B0B7C3" /></svg>
</div>
</div>
</>
);
};