"use client";
import axios from "axios";
import React, { useEffect, useState } from "react";

interface Permission {
  id: string;
  name: string;
  group: string;
}

const Page: React.FC<{ params: { roleId: string } }> = ({ params }) => {
  const token = localStorage.getItem("jobAdminJwtToken");
  const [permissions, setPermissions] = useState<Permission[]>([]);
  const [selectedPermissions, setSelectedPermissions] = useState<string[]>([]);
  const [currentPage, setCurrentPage] = useState<number>(1);
  const permissionsPerPage: number = 5; // Change this number to adjust the number of permissions per page

  const fetchData = async () => {
    try {
      const response = await axios.get(
        `${process.env.NEXT_PUBLIC_API_BASE_URL}permissions`,
        {
          headers: {
            "Content-Type": "application/json",
            Authorization: `Bearer ${token}`,
          },
        }
      );
      setPermissions(response.data.data);
    } catch (error) {
      console.error("Error fetching data:", error);
    }
  };

  useEffect(() => {
    fetchData();
  }, []);

  // Function to handle checkbox state change
  const handleCheckboxChange = (permissionId: string) => {
    if (selectedPermissions.includes(permissionId)) {
      setSelectedPermissions(
        selectedPermissions.filter((id) => id !== permissionId)
      );
    } else {
      setSelectedPermissions([...selectedPermissions, permissionId]);
    }
  };

  // Function to render permissions for the current page within each group
  const renderPermissionsByGroup = () => {
    const groupedPermissions: { [key: string]: Permission[] } = {};
    permissions.forEach((permission) => {
      if (!groupedPermissions[permission.group]) {
        groupedPermissions[permission.group] = [];
      }
      groupedPermissions[permission.group].push(permission);
    });

    return Object.keys(groupedPermissions).map((group) => (
      <div key={group} className="my-1 p-3 bg-[#fff]">
        <h2>{group}</h2>
        <div className="flex justify-between pt-2 md:flex-row flex-col">
          {groupedPermissions[group]
            .slice(
              (currentPage - 1) * permissionsPerPage,
              currentPage * permissionsPerPage
            )
            .map((permission) => (
              <div
                key={permission.id}
                className="flex md:justify-between sm:justify-self-start  px-2"
              >
                <label
                  htmlFor={permission.id}
                  className="relative inline-block cursor-pointer h-5 w-5"
                >
                  <input
                    id={permission.id}
                    type="checkbox"
                    checked={selectedPermissions.includes(permission.id)}
                    onChange={() => handleCheckboxChange(permission.id)}
                    className="absolute opacity-0 w-0 h-0 overflow-hidden"
                  />
                  <span className="absolute inset-0 bg-transparent border border-blue-gray-200 rounded-md transition-all"></span>
                  {selectedPermissions.includes(permission.id) && (
                    <span className="absolute inset-0 bg-blue-gray-500 opacity-25 rounded-md"></span>
                  )}
                </label>
                <p>{permission.name}</p>
              </div>
            ))}
        </div>
        {groupedPermissions[group].length > permissionsPerPage && (
          <div>
            <button
              onClick={() => setCurrentPage(currentPage - 1)}
              disabled={currentPage === 1}
            >
              Previous
            </button>
            <button
              onClick={() => setCurrentPage(currentPage + 1)}
              disabled={
                currentPage * permissionsPerPage >=
                groupedPermissions[group].length
              }
            >
              Next
            </button>
          </div>
        )}
      </div>
    ));
  };

  return <div>{renderPermissionsByGroup()}</div>;
};

export default Page;