/* eslint-disable @typescript-eslint/no-explicit-any */
import { useEffect, useState } from "react";
import styles from "./programs.module.scss";
import ProgramItem from "../program-item";
import NoResults from "../no-results";
import Pagination from "../pagination";
import MemberSearch from "@/components/members/member-search";
import ResultsPerPage from "../results-per-page";
import { usePaginatedData } from "@/hooks/usePaginatedData";
import RefreshButton from "@/components/shared/RefreshButton";

const SkeletonLoader = () => {
  const rows = Array.from({ length: 10 });
  return (
    <div className={styles["skeleton__wrapper"]}>
      {rows.map((_, i) => (
        <div key={i} className={styles["skeleton__row"]}>
          <div className={styles["skeleton__cell"]}></div>
          <div className={styles["skeleton__cell"]}></div>
          <div className={styles["skeleton__cell"]}></div>
          <div className={styles["skeleton__cell"]}></div>
          <div className={styles["skeleton__cell"]}></div>
        </div>
      ))}
    </div>
  );
};

interface projectsProps {
  programs: any[];
  links: any[];
  perPage?: number;
}

const ProgramsComponent: React.FC<projectsProps> = ({
  programs,
  links,
  perPage: initialPerPage = 10,
}) => {
  const [isFading, setIsFading] = useState<boolean>(false);

  // console.log("Received projects component", links)

  const {
    perPage,
    loading: isLoading,
    setLoading,
    handlePageChange,
    handlePerPageChange,
  } = usePaginatedData(initialPerPage);

  useEffect(() => {
    const timer = setTimeout(() => {
      setIsFading(true);
      setTimeout(() => setLoading(false), 400);
    }, 1500);
    return () => clearTimeout(timer);
  }, [setLoading]);

  const triggerReload = () => {
    setLoading(true);
    setIsFading(false);
    setTimeout(() => {
      setIsFading(true);
      setTimeout(() => setLoading(false), 400);
    }, 1500);
  };

  return (
    <div className={styles["attend"]}>
      <div className={styles["attend__toolbar"]}>
        <h1>Manage All Church Programs</h1>
        <p>Seamlessly sync and manage all church programs all in one dashboard</p>
        <form action="/projects" method="GET">
          <div className={styles["attend__toolbar--search"]}>
            <MemberSearch 
              placeholder="Search programs by their name" 
              url={""} 
            />
          </div>

          <div className={styles["attend__toolbar--helpers"]}>
             {/* <div className={styles["attend__results"]}>
              <ResultsPerPage
                current={perPage}
                options={[1, 5, 10, 25, 50]}
                onChange={handlePerPageChange}
              />
            </div> */}
            <RefreshButton onClick={triggerReload} />
          </div>
        </form>
      </div>

      <div className={styles["attend__table"]}>
        <div className={styles["attend__table--children"]}>
          {isLoading ? (
            <div
              className={`${styles["skeleton__container"]} ${
                isFading ? styles.fadeOut : ""
              }`}
            >
              <SkeletonLoader />
            </div>
          ) : (
            <div className={`${styles["data__container"]} ${styles.fadeIn}`}>
              { programs && programs?.data?.map((program: any) => (
                <ProgramItem key={program.id} program={program} />
              ))}
            </div>
          )}

          {!isLoading && programs?.length === 0 && (
            <NoResults
              title="No Programs(s) Found"
              remark="Oops! It seems you are yet to create any program(s). Please use the button above to add one."
            />
          )}
        </div>

        {/* Pagination */}
        <div className={styles["attend__pagination"]}>
          {programs?.length > 0 && links?.length > 0 && (
            <Pagination links={links} onChange={handlePageChange} />
          )}
        </div>
      </div>
    </div>
  );
};

export default ProgramsComponent;