profile

import React, { useEffect, useState } from "react";
import { Link, useParams } from "react-router-dom";
import Page from "../../components/Page";
import Avatar from "../../components/Nav/components/Avatar";
import HobbyIcon from "../../components/HobbyIcon";
import { UseQueryResult, useQuery } from "react-query";
import { getUser } from "../../utils/getUser";
import { UserI } from "../../types";
import { camelCase } from "lodash";
import { ApolloError, useLazyQuery } from '@apollo/client'
import { STAFF_QUERY, StaffData } from '../../gql/staffQuery'
import Skeleton from 'react-loading-skeleton'
import 'react-loading-skeleton/dist/skeleton.css'
import { getPeoplePhotoUrl } from '../../common/peoplePhoto'
import Channel from '../../components/Channel';
import { useNavigate } from 'react-router-dom';
import { BsMicrosoftTeams, BsSlack } from 'react-icons/bs';
import { MdEmail } from 'react-icons/md';
import { useUser } from "../../utils/userContext";

function useProfileStaffData() {
  const { id } = useParams();
  const azureUserData = useUser().userData;
  const [lastUserID, setLastUserID] = useState<string | undefined>(undefined);
  const [graphQLError, setGraphQLError] = useState<ApolloError | null>(null);
  const [graphQLData, setGraphQLData] = useState<StaffData | null>(null);
  const [graphQLLoading, setGraphQLLoading] = useState(true);
  const [
    fetchStaffData,
    { called, loading: queryLoading, error: queryError, data: queryData },
  ] = useLazyQuery<StaffData>(STAFF_QUERY, {
    onCompleted: (data) => {
      setGraphQLData(data);
      setGraphQLLoading(false);
      setGraphQLError(null);
    },
    onError: (error) => {
      setGraphQLData(null);
      setGraphQLLoading(false);
      setGraphQLError(error);
    },
  });

  useEffect(() => {
    // Check if azureUserData has data and is not in the loading state
    if (
      azureUserData && id &&
      (graphQLLoading || id !== lastUserID)
    ) {
      let staffName: string | null = null;
      let staffId: number | null = null;

      setLastUserID(id);

      // Check if the paramData.id is "me" or a number
      if (id === "me") {
        // If the paramData.id is "me" or a number, then set the staffName variable
        staffName = `${azureUserData.givenName} ${azureUserData.surname}`;
      } else {
        // If the paramData.id is "me" or a number, then set the staffId variable
        staffId = parseInt(id === undefined ? "" : id);
      }

      // Call the fetchStaffData function (trigger the query)
      fetchStaffData({
        variables: {
          staffId,
          staffName,
        },
      });
    }
  }, [azureUserData, fetchStaffData, graphQLLoading, id, lastUserID]);

  return { loading: queryLoading, error: graphQLError, data: graphQLData };
}

const Profile = () => {
  const { id } = useParams();
  const navigate = useNavigate();
  const { loading, error, data } = useProfileStaffData();

  const staff = data?.staff;

  return (
    <Page>
      <div className="text-text-primary font-bold text-xl">Profile</div>
      <div className="flex flex-row gap-5 items-center">
        {loading || !staff ? (
          <Skeleton width={150} height={150} circle />
        ) : (
          <Avatar
            avatar={getPeoplePhotoUrl(staff?.image, true) as Blob}
            loading={loading}
            size={150}
            user={staff}
            userLoading={loading}
            grayed={false}
          />
        )}
        <div className="flex flex-col gap-3">
          {loading ? (
            <Skeleton width={200} height={30} />
          ) : (
            <h1 className="text-3xl font-bold text-text-primary">
              {staff?.name}
            </h1>
          )}
          {loading ? (
            <Skeleton width={160} height={15} />
          ) : (
            <p className="text-text-primary">{staff?.role}</p>
          )}
        </div>
        <div className="flex-grow">
          {/* Empty div to make the "About" text align to the end */}
        </div>
        {
          (id === "me") ?
          (
            <div>
              <Link to="/edit-profile">
                <button className="bg-sky-orange text-white py-2 px-4 rounded-md transition-all hover:bg-sky-orange-dark">
                  Edit Profile
                </button>
              </Link>
            </div>
          ) : (
            <>
              <a href={`https://teams.microsoft.com/l/chat/0/0?users=${staff?.email}`}>
                <div className="border flex flex-row items-center gap-x-2 text-text-primary border-text-primary py-3 px-8 rounded-md justify-end transition-all hover:border-purple-500 hover:bg-purple-500 hover:text-white">
                  <BsMicrosoftTeams />
                  <p className="">Teams</p>
                </div>
              </a>
              <a href={`mailto:${staff?.email}`} >
                <div className="border  flex flex-row items-center gap-x-2 text-text-primary border-text-primary py-3 px-8 rounded-md justify-end transition-all hover:border-blue-500 hover:bg-blue-500 hover:text-white">
                  <MdEmail />
                  <div>
                    <p className="">Email</p>
                  </div>
                </div>
              </a>
            </>
          )
        }
      </div>
      <div className=" grid grid-cols-3">
        <div id="hobbies">
          <h2 className="text-text-primary text-lg font-bold">Hobbies</h2>
          {loading ? (
            <Skeleton width={160} height={35} />
          ) : (
            <div className="flex flex-row gap-1">
              {staff?.hobbies.map((hobby) => (
                <HobbyIcon key={hobby.icon} hobby={hobby.icon} />
              ))}
            </div>
          )}
        </div>
        <div id="technology">
          <h2 className="text-text-primary text-lg font-bold">
            Favourite Technology
          </h2>
          <p className=" text-sky-orange">{staff?.technology}</p>
        </div>
        {
          (staff?.initiatives !== undefined && staff?.initiatives.length > 0)? (
          <div id="initiatives">
            <h2 className="text-text-primary text-lg font-bold">Initiatives</h2>
            {staff?.initiatives.map((initiative) => (
              <p key={initiative.name} className="text-sky-orange">
                {initiative.name}
              </p>
            ))}
          </div>
          ) : (
            <div/>
          )
        }
      </div>
      <div>
        <h2 className="text-text-primary text-lg font-bold">Manager</h2>
        {loading || staff?.manager != null ? (
          <button
            onClick={() => {
              navigate(`/profile/${staff?.manager.id}`);
            }}
            className="flex flex-row gap-5 items-center mt-3"
          >
            {loading || !staff ? (
              <Skeleton width={150} height={150} circle />
            ) : (
              <Avatar
                avatar={getPeoplePhotoUrl(staff?.manager.image, true) as Blob}
                loading={loading}
                size={90}
                user={staff}
                userLoading={loading}
                grayed={false}
              />
            )}
            <div className="flex flex-col gap-3">
              <h1 className="text-lg font-bold text-text-primary text-left">
                {staff?.manager.name}
              </h1>
              <p className="text-text-primary text-left">
                {staff?.manager.role}
              </p>
            </div>
          </button>
        ) : (
          <div className="flex flex-row gap-5 items-center mt-3">
            <p className="text-text-primary">
              {staff?.name} does not have a manager
            </p>
          </div>
        )}
      </div>
      <div>
        <h2 className="text-text-primary text-lg font-bold">Team</h2>
        <Link to={`/teams/${camelCase(staff?.team.title)}/${staff?.team.id}`} className=" bg-neutral-dimmed w-full p-5 flex flex-row justify-start gap-3 rounded-lg no-underline">
          <div className=" flex flex-col gap-2">
            <h1 className="text-lg font-bold text-text-primary text-left">
              {staff?.team.title}
            </h1>
            <a className="text-left text-sky-orange hover:no-underline no-underline">
              {staff?.team.distributionList}
            </a>
            <Channel links={staff?.team.links} />
            <p className="text-text-primary text-left">
              {staff?.team.description.tagLine}
            </p>
            <p className="text-text-primary text-left">
              {staff?.team.description.description}
            </p>
          </div>
        </Link>
      </div>
    </Page>
  );
};

export default Profile;