"use client";

import { Fragment, useReducer, useState } from "react";
import { Combobox, Dialog, Transition } from "@headlessui/react";
import { MagnifyingGlassIcon } from "@heroicons/react/20/solid";
import { UsersIcon } from "@heroicons/react/24/outline";
import { ChevronRightIcon } from "@heroicons/react/20/solid";
import { useEffect } from "react";

function classNames(...classes) {
  return classes.filter(Boolean).join(" ");
}

const reducer = (state, action) => {
  switch (action.type) {
    case "SET_ORG_COLLEAGUES":
      return { ...state, data: action.payload };
    case "SET_RECENT_ORG_COLLEAGUES":
      return { ...state, recentData: action.payload };
    case "SET_LOADING":
      return { ...state, loading: action.payload };
  }
  return state;
};

export default function OrgUserModal({ open, setOpen }) {
  const [state, dispatch] = useReducer(reducer, {
    data: null,
    recentData: null,
    loading: true,
  });

  useEffect(() => {
    try {
      fetch("/api/org-colleagues")
        .then((res) => res.json())
        .then((data) => {
          console.log(data);
          dispatch({ type: "SET_DATA", payload: data });
        });
      fetch("/api/org-colleagues/recent")
        .then((res) => res.json())
        .then((data) => {
          console.log(data);
          dispatch({ type: "SET_RECENT_DATA", payload: data });
        });
    } catch (error) {
      console.log(error);
    }
    dispatch({ type: "SET_LOADING", payload: false });
  }, []);

  if (state.loading) return <p>Loading...</p>;
  if (!state.data) return <p>No profile data {JSON.stringify(state)}</p>;