import { Divider } from "antd";
import { useRouter } from "next/router";
import { useEffect, useState } from "react";
import { useAuth } from "../../contexts/authContext";
import { Team, TeamStatus } from "../../models/team";
import { User, UserStatus } from "../../models/user";
import TeamService from "../../services/teamService";

const initialSite: string = "https://";

const teamService = new TeamService();

export default function CreateTeam() {
  const { currUser } = useAuth();
  const [error, setError] = useState<string>("");
  const [loading, setLoading] = useState<Boolean>(true);
  const router = useRouter();

  useEffect(() => {
    (async function () {
      try {
        // if not authenticated, take user to the login
        if (!currUser) {
          console.log(
            "not authenticated...routing from dashboard to teams home"
          );
          router.push("/teams/login");
        }

        // todo if user is in a team already, notify them to make sure
        // buttt most likely will already be routed to the correct place from the router...don't do the router's job
      } catch (error) {
        console.log(error);
        router.push("/teams/login");
      }

      setLoading(false);
    })();
  }, []);

  async function handleSubmit(e) {
    e.preventDefault();

    setLoading(true);

    if (!teamName) {
      setError("You must input a team name!");
      return;
    }

    try {
      const team = new Team();
      team.name = teamName;
      team.createdByUserId = currUser.uid;
      team.status = TeamStatus.created;

      if (companySite != initialSite) {
        // make sure to put null in database for the team
        team.companySite = companySite;
      }

      // provision a team with state of initiated
      const createdTeamId = await teamService.createTeam(team);
      router.push("/teams/" + createdTeamId);
    } catch (error) {
      setError(error.message);
    }

    setLoading(false);
  }

  const [teamName, setTeamName] = useState<string>("");
  const [companySite, setcompanySite] = useState<string>(initialSite);

  return (
    <form
      className="container mx-auto flex flex-col max-w-md m-10 bg-white p-10 rounded-lg shadow-md space-y-5"
      onSubmit={handleSubmit}
    >
      {/* header */}
      <div className="text-lg">🙌Create a Team</div>

      {error && <span className="text-red-300 text-md">{error}</span>}

      <Divider />

      <span className="flex flex-col items-start">
        <span className="text-md">Team Name</span>
        <span className="text-gray-300 text-xs mb-2">
          Everyone in your team will see this. You can always change this later.
        </span>
        <input
          placeholder="ex. AirBnB"
          className="w-full rounded-lg bg-gray-50 p-3"
          value={teamName}
          onChange={(e) => setTeamName(e.target.value)}
        />
      </span>

      <span className="flex flex-col items-start">
        <span className="text-md">Company Site</span>
        <span className="text-gray-300 text-xs mb-2">optional</span>
        <input
          placeholder="ex. https://"
          className="w-full rounded-lg bg-gray-50 p-3"
          value={companySite}
          onChange={(e) => setcompanySite(e.target.value)}
        />
      </span>

      <Divider />

      <span className="flex flex-row justify-end space-x-2">
        <button
          onClick={(e) => {
            e.preventDefault();
            router.push("/teams");
          }}
          className="bg-gray-100 py-2 px-5 rounded text-gray-400"
        >
          Cancel
        </button>
        {loading ? (
          <div
            className="spinner-border animate-spin inline-block w-8 h-8 border-4 rounded-full text-blue-600"
            role="status"
          >
            <span className="text-black hidden">Loading...</span>
          </div>
        ) : (
          <button
            type="submit"
            className="text-sm text-white font-semibold py-2 px-5 bg-teal-500 rounded"
          >
            {"Continue ->"}
          </button>
        )}
      </span>
    </form>
  );
}