import gql from "gql-tag";
import { useNavigate, useParams } from "react-router-dom";
import type { Company, User } from "../types";
import { useQuery } from "urql";
import { Projects } from "../components/_layouts/Projects";
import { Spinner } from "../components/Spinner";
import { Users } from "../components/Users";

const companyQuery = gql`
  query CompanyQuery($id: String!, $dateRange: DateTimeInput!) {
    companies(where: { id: $id }) {
      companies {
        id
        name
        users {
          id
          email
        }
        aggregate {
          projectCount
          requestCount(options: $dateRange)
          averageRequestExecutionTime(options: $dateRange)
          averageContentLength(options: $dateRange)
        }
      }
    }
  }
`;

export function Company() {
  const params = useParams();
  const navigate = useNavigate();

  const [result] = useQuery({
    query: companyQuery,
    variables: { id: params.companyId },
  });

  const company = (result?.data?.companies?.companies || [])[0] as Company;
  const members = [...(company?.members || []), company?.user] as User[];

  return (
    <>
      <div className="border-b border-gql-vis-grey-2 p-5">
        <h2 className="text-2xl text-center font-bold text-gql-vis-darkblue">
          {company?.name}
        </h2>
      </div>

      <div className="m-10 pb-10">
        <div className="flex border-b border-gql-vis-grey-2">
          <div className="p-5">
            <h2 className="text-2xl font-bold text-gql-vis-darkblue">
              Projects
            </h2>
          </div>
          <div className="p-5 ml-auto">
            <p className="ml-auto">
              <button
                onClick={() =>
                  navigate(`/company/${company.id}/project/create`)
                }
                type="button"
                className="flex justify-center rounded-md border border-transparent bg-green-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2"
              >
                Create
              </button>
            </p>
          </div>
        </div>

        {result.fetching ? (
          <div className="flex justify-center align-center mx-auto pt-20">
            <Spinner></Spinner>
          </div>
        ) : (
          <>{company && <Projects companyId={company.id} />}</>
        )}
      </div>

      <div className="m-10 pb-10">
        <div className="flex border-b border-gql-vis-grey-2">
          <div className="p-5">
            <h2 className="text-2xl font-bold text-gql-vis-darkblue">Users</h2>
          </div>
          <div className="p-5 ml-auto">
            <p className="ml-auto">
              <button
                onClick={() => navigate(`/company/${company?.id}/add-member`)}
                type="button"
                className="flex justify-center rounded-md border border-transparent bg-green-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2"
              >
                Create
              </button>
            </p>
          </div>
        </div>

        <Users users={members}></Users>
      </div>
    </>
  );
}
