import React, { useState, useEffect, useContext } from "react";
import AuthContext from "../../../contexts/auth.context";
import UserContext from "../../../contexts/user.context";
import { catchUtil } from "../../../api/apiUtils";
import ProjectAPI from "../../../api/project.api";
import AdminAPI from "../../../api/admin.api";

import Projects from "./Projects";

function ProjectsContainer({ closeNavbarForMobile }: any) {
  let [error, setError] = useState(""),
    [as, setAs] = useState(false),
    [projects, setProjects] = useState<Project[]>([]),
    [pagination, setPagination] = useState({
      totalPages: 1,
      currentPage: 0
    }),
    [projectCount, setProjectCount] = useState(0),
    [searchInput, setSearchInput] = useState(""),
    [displayZeroProjectsCard, setDisplayZeroProjectsCard] = useState(false);

  const authContext = useContext(AuthContext);
  const userContext = useContext(UserContext);

  const triggerSearch = async () => {
    console.log("searching for: ", searchInput);
  };

  const fetchPage = async (page: { selected: number }) => {
    try {
      let {
        data: { data, meta }
      } = await (userContext.user.admin.as ? AdminAPI : ProjectAPI)(
        authContext
      ).list(page.selected + 1);

      setPagination({
        totalPages: meta.total_pages,
        currentPage: meta.currentPage
      });

      setProjectCount(meta.total);
      if (meta.total === 0) setDisplayZeroProjectsCard(true);

      setProjects(data);
    } catch (err) {
      catchUtil(err, setError);
    }
  };

  useEffect(() => {
    closeNavbarForMobile();
    setAs(userContext.user.admin.as);
    // eslint-disable-next-line
  }, []);

  useEffect(() => {
    if (userContext.user.admin.as === as) return;
    setAs(oldValue => !oldValue);

    setPagination({
      totalPages: 1,
      currentPage: 0
    });
    // eslint-disable-next-line
  }, [userContext]);

  useEffect(() => {
    fetchPage({ selected: pagination.currentPage });
    // eslint-disable-next-line
  }, [as]);

  return (
    <Projects
      error={error}
      projects={projects}
      pagination={pagination}
      fetchPage={fetchPage}
      projectCount={projectCount}
      searchInput={searchInput}
      setSearchInput={setSearchInput}
      triggerSearch={triggerSearch}
      displayZeroProjectsCard={displayZeroProjectsCard}
    />
  );
}

export default ProjectsContainer;