import React, { useEffect,useState } from "react";
import { useSelector } from "react-redux";


const MasterTable = ({ data, columns, loading, handleModalData }) => {
    const selectedMaster = useSelector((store)=>store.localVariables.selectedMaster)
    const hiddenColumns = ["id", "featurePermission"];

    const [currentPage, setCurrentPage] = useState(1);
    const [itemsPerPage] = useState(10);
    const indexOfLastItem = currentPage * itemsPerPage;
    const indexOfFirstItem = indexOfLastItem - itemsPerPage;
    const currentItems = data.slice(indexOfFirstItem, indexOfLastItem);
  
  
    const paginate = (pageNumber) => setCurrentPage(pageNumber);
    const totalPages = Math.ceil(data.length / itemsPerPage);

    const updatedColumns = columns
    .filter((col) => !hiddenColumns.includes(col.key)) 
    .map((col) => ({
      ...col,
      label: col.key === "role" || "module" || "status" ? "Name" : col.label,
    }));

  return (
    <div className="table-responsive">
    {loading ? (
      <p>Loading...</p>
    ) : (
      <table   className="datatables-users table border-top dataTable no-footer dtr-column"
      id="DataTables_Table_0"
      aria-describedby="DataTables_Table_0_info"
      style={{ width: "100%" }}>
        <thead>
          <tr>
            {/* {updatedColumns.map((col) => (
              <th key={col.key}>{col.label}</th>
            ))} */}
            <th></th> 
             <th>Name</th> 
             <th>Description</th> 
            <th>Actions</th> 
          </tr>
        </thead>
        <tbody>
          {currentItems.length > 0 ? (
            currentItems.map((item, index) => (
              <tr key={index}>
               <td></td>
               {updatedColumns.map((col) => (
                  <td className="text-start mx-2"  key={col.key}>{item[col.key] || " --- "}</td>
                ))}
                <td>
                
                  <button
                    aria-label="Modify"
                    type="button"
                    data-bs-toggle="modal"
                    data-bs-target="#master-modal"
                    className="btn p-0 dropdown-toggle hide-arrow"
                    onClick={() => handleModalData(`Edit-${selectedMaster}`, item)}
                  >
                    <i className="bx bxs-edit me-2 text-primary"></i>
                  </button>

                  <button
                    aria-label="Delete"
                    type="button"
                    className="btn p-0 dropdown-toggle hide-arrow"
                    data-bs-toggle="modal"
                    data-bs-target="#master-modal"
                    onClick={() => handleModalData("delete", item)}
                  >
                    <i className="bx bx-trash me-1 text-danger"></i>
                  </button>
                </td>
              </tr>
            ))
          ) : (
            <tr>
              <td colSpan={updatedColumns.length + 4}>No results found.</td>
            </tr>
          )}
        </tbody>
      </table>
    )}

       {/* Pagination */}
       {
                !loading && (
                  <nav aria-label="Page " >
                  <ul className="pagination pagination-sm justify-content-end py-1">
                       <li className={`page-item  ${currentPage === 1 ? 'disabled' : ''}`}>
                           <button className="page-link btn-xs" onClick={() => paginate(currentPage - 1)}>&laquo;</button>
                       </li>
                      {[...Array(totalPages)].map((_, index) => (
                         <li key={index} className={`page-item ${currentPage === index + 1 ? 'active' : ''}`}>
                            <button className="page-link " onClick={() => paginate(index + 1)}>
                             {index + 1}
                            </button>
                         </li>
                      ))}
                      <li className={`page-item ${currentPage === totalPages ? 'disabled' : ''}`}>
                          <button className="page-link " onClick={() => paginate(currentPage + 1)}>&raquo;</button>
                     </li>
                 </ul>
                </nav>
                )
              }
  </div>
  );
};

export default MasterTable;