"use client";

import type { Result } from "./person";
import PersonItem from "./PersonItem";

import { useEffect, useState } from "react";

import {
  fetchRandomUsers,
  clearList,
  removeUser,
} from "@/lib/features/people/personSlice";

import { useAppSelector, useAppDispatch, useAppStore } from "../../lib/hooks";

const PeoplePage = () => {
  const { results, isLoading } = useAppSelector((store) => store.people);

  const dispatch = useAppDispatch();

  useEffect(() => {
    dispatch(fetchRandomUsers());
  }, []);

  const handleClearList = () => {
    dispatch(clearList());
  };

  const reset = () => {
    dispatch(fetchRandomUsers());
  };

  const remove = (id: any) => {
    dispatch(removeUser(id));
  };

  if (isLoading) {
    return (
      <div className="p-6 max-w-md mx-auto my-4">
        {" "}
        <span className="loading loading-spinner loading-sm"></span>
      </div>
    );
  }
  return (
    <section>
      <h2 className="font-bold text-center text-amber-900 tracking-tight mt-2 text-3xl">
        People Page
      </h2>
      <div className="flex items-center justify-center mt-5">
        {results?.length < 1 ? (
          <button className="btn btn-soft" onClick={reset}>
            reset
          </button>
        ) : (
          <button className="btn btn-soft" onClick={handleClearList}>
            Clear All
          </button>
        )}
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-6">
        {results?.map((p: Result) => {
          return <PersonItem {...p} key={p.login.uuid} remove={remove} />;
        })}
      </div>
    </section>
  );
};

export default PeoplePage;