import React, { useState, useEffect } from "react";
import { Table, Spinner, Pagination, Form } from "react-bootstrap";
import {toast} from "react-toastify"; // if you want to use Toast notifications, or use a React version of it
import moment from "moment";
// import { ExcelService } from "src/app/services/excel.service";
// import { UsergrpmaintainceService } from "src/app/services/admin/usergrpmaintaince.service";
// import { MenuGroupService } from "src/app/services/admin/menu-group.service";

const GridViewComponent = () => {
  const [loading, setLoading] = useState(false);
  const [givendata, setGivendata] = useState([]);
  const [error, setError] = useState(null);
  const [modalAdd, setModalAdd] = useState(false);
  const [modalEdit, setModalEdit] = useState(false);
  const [modalDelete, setModalDelete] = useState(false);
  const [rowSelected, setRowSelected] = useState({});
  const [orders, setOrders] = useState([]);
  const [submitted, setSubmitted] = useState(false);

  // useEffect(() => {
  //   // Fetching the data on component mount
  //   setLoading(true);
  //   UsergrpmaintainceService.getAll()
  //     .then((data) => {
  //       setLoading(false);
  //       setGivendata(data);
  //       if (data.length === 0) {
  //         setError("No data Available");
  //       }
  //     })
  //     .catch((err) => {
  //       setLoading(false);
  //       setError("Server Error");
  //     });
  // }, []);

  const handleRowSelect = (row) => {
    setRowSelected(row);
  };

  const handlePagination = (page) => {
    // Handle pagination logic here
  };

  return (
    <div style={{ display: "block" }}>
      <div className="dg-wrapper">
        <div className="clr-row">
          <div className="clr-col-8">
            <h3>User Group Maintenance</h3>
          </div>
        </div>
        <div>
          {loading ? (
            <div>
              <Spinner animation="border" /> Loading...
            </div>
          ) : error ? (
            <div>{error}</div>
          ) : (
            <Table striped bordered hover>
              <thead>
                <tr>
                  <th>User Group No</th>
                  <th>Group Name</th>
                  <th>Description</th>
                  <th>Group Level</th>
                  <th>Status</th>
                  <th>Updated Date</th>
                </tr>
              </thead>
              <tbody>
                {givendata.reverse().map((user, index) => (
                  <tr key={index} onClick={() => handleRowSelect(user)}>
                    <td>{user.usrGrp}</td>
                    <td>{user.groupName}</td>
                    <td>{user.groupDesc}</td>
                    <td>{user.groupLevel}</td>
                    <td>{user.status}</td>
                    <td>{user.updateDateFormated}</td>
                  </tr>
                ))}
              </tbody>
            </Table>
          )}
        </div>

        <div>
          {/* Pagination logic */}
          <Pagination>
            {/* Add pagination items here */}
            <Pagination.Item onClick={() => handlePagination(1)}>1</Pagination.Item>
            <Pagination.Item onClick={() => handlePagination(2)}>2</Pagination.Item>
            {/* Pagination logic based on the fetched data */}
          </Pagination>
        </div>
      </div>
    </div>
  );
};

export default GridViewComponent;
