import { h } from 'preact';
import { useState, useEffect } from 'preact/hooks';

const GitHubProjects = ({ username, isOrganization }) => {
  const [repos, setRepos] = useState([]);
  const [error, setError] = useState(null);
  const [currentPage, setCurrentPage] = useState(1);
  const reposPerPage = 10;

  const fetchRepos = async (page = 1, allRepos = []) => {
    const baseUrl = 'https://api.github.com';
    const url = isOrganization
        ? `${baseUrl}/orgs/${username}/repos?page=${page}&per_page=100`
        : `${baseUrl}/users/${username}/repos?page=${page}&per_page=100`;

    try {
      const response = await fetch(url);
      const data = await response.json();

      if (response.ok) {
        if (Array.isArray(data)) {
          allRepos = allRepos.concat(data.filter(repo => !repo.fork));
          // If the data length is 100, there might be more repositories to fetch
          if (data.length === 100) {
            return fetchRepos(page + 1, allRepos);
          }
        } else {
          console.error('Unexpected data format:', data);
          setError('Unexpected data format');
          setRepos([]);
        }
      } else {
        console.error('API error:', data);
        setError(data.message);
        setRepos([]);
      }
    } catch (err) {
      console.error('Failed to fetch projects:', err);
      setError(err.message);
      setRepos([]);
    }

    return allRepos;
  };

  useEffect(() => {
    fetchRepos().then(setRepos);
  }, [username, isOrganization]);

  // Get current repos
  const indexOfLastRepo = currentPage * reposPerPage;
  const indexOfFirstRepo = indexOfLastRepo - reposPerPage;
  const currentRepos = repos.slice(indexOfFirstRepo, indexOfLastRepo);

  // Change page
  const nextPage = () => setCurrentPage(currentPage + 1);
  const prevPage = () => setCurrentPage(currentPage - 1);

  return (
    <div>
      {error && <div class="error">{error}</div>}
      <div class="grid">
        {currentRepos.map((repo) => (
          <article class="card">
            <h1>{repo.name}</h1>
            <p>{repo.description}</p>
            <div class="row">
                <a href={repo.html_url} target="_blank">Repository</a>
            </div>
          </article>
        ))}
      </div>
      <div>
        {currentPage > 1 && <button class="button margin" onClick={prevPage}>Previous</button>}
        {currentPage < Math.ceil(repos.length / reposPerPage) && <button class="button margin" onClick={nextPage}>Next</button>}
      </div>
    </div>
  );
};

export default GitHubProjects;