import React, { Fragment, useState } from "react";
import { useForm, SubmitHandler } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import * as z from "zod";
import Page from "../../components/Page";
import HobbiesDropdown from "../../components/DropdownMenu";
import DayPicker from "../../components/DayPicker";
import {
  DEPARTMENT_NAME_QUERY,
  DepartmentName,
} from "../../gql/departmentQuery";
import { useQuery } from "@apollo/client";
import { useMutation } from "@apollo/client";
import { CREATE_TEAM_MUTATION, MODIFY_TEAM_MUTATION, CreateTeamInput, UpdateTeamInput} from "../../gql/teamMutation";
import { STAFF_MUTATION } from "../../gql/staffMutation";
import { UserI } from "../../types";
import { getUser } from "../../utils/getUser";
import { UseQueryResult, useQuery as reactUseQuery } from "react-query";
import Upload from "../../components/UploadAntDesign";
import { useToasts } from "react-toast-notifications";

export default function CreateTeamForm() {
  const { register, handleSubmit, formState: { errors } } = useForm<CreateTeamInput>();
  const [createTeam] = useMutation(CREATE_TEAM_MUTATION);

  const onSubmit: SubmitHandler<CreateTeamInput> = async (data) => {
    try {
      const response = await createTeam({ variables: { newTeam: data } });
      console.log('Team created', response);
    } catch (error) {
      console.error('Error creating team', error);
    }
  };


  return (
    <Page>
    {/* Hero Section */}
    <div className="grid place-items-center py-12">
      <div
        className="absolute inset-x-0 -top-40 -z-20 transform-gpu overflow-hidden blur-3xl sm:-top-80"
        aria-hidden="true"
      >
        <div
          className="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#bfdbfe] to-[#2563eb] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
          style={{
            clipPath:
              "polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)",
          }}
        />
      </div>
      <div className="mx-auto max-w-2xl">
        <h1 className="text-4xl text-center font-semibold tracking-tight text-text-primary sm:text-6xl animate__animated animate__slideInDown flex pl-4 justify-center">
          Creating or Updating a Team
        </h1>
        <p className="mt-6 text-lg text-center leading-8 text-text-secondary">
          This page serves as a dedicated platform to efficiently manage teams
          within a designated department. Seamlessly add or amend
          teams from the chosen department.
        </p>
      </div>

    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label>Department ID</label>
        <input {...register('departmentID', { required: true })} type="number" />
        {errors.departmentID && <span>This field is required</span>}
      </div>
      <div>
        <label>Title</label>
        <input {...register('title')} type="text" />
      </div>
      {/* Add other fields here following the same pattern */}
      <button type="submit">Create Team</button>
    </form>
    </div>
    </Page>
  );
}