import { NextPage } from "next/types";
import { useEffect } from "react";
import FormResponse from "../components/FormResponse";
import Layout from "../components/Layout";
import Spinner from "../components/Spinner";
import { useAuth } from "../context/UserContext";
import useForm from "../hooks/useForm";
import api from "../utils/api";

const Settings: NextPage = () => {
  const { updateUser, user } = useAuth();

  const { error, submitHandler, success, loading } = useForm(api.updateUser);

  useEffect(() => {
    if (success) {
      updateUser(success.result);
    }
  }, [success, updateUser]);

  return user ? (
    <Layout>
      <form className="form" onSubmit={submitHandler}>
        <div className="form-group">
          <label htmlFor="name" className="form-label">
            Name
          </label>
          <input
            type="text"
            name="name"
            id="name"
            className="form-input"
            defaultValue={user.name}
            required
          />
        </div>
        <div className="form-group">
          <label htmlFor="email" className="form-label">
            Email
          </label>
          <input
            type="email"
            name="email"
            id="email"
            className="form-input"
            defaultValue={user.email}
            required
          />
        </div>
        <div className="form-group">
          <label htmlFor="password" className="form-label">
            Password
          </label>
          <input
            type="password"
            id="password"
            name="password"
            className="form-input"
            defaultValue={user.password}
            minLength={6}
            required
          />
        </div>
        <div className="form-group">
          <label htmlFor="team" className="form-label">
            Team
          </label>
          <select
            className="form-input appearance-none bg-dropdown-arrow bg-no-repeat bg-[right_8px_center]"
            id="team"
            name="team"
            defaultValue={user.team}
            required
          >
            <option value="Admins">Admins</option>
            <option value="Users">Users</option>
            <option value="Viewers">Viewers</option>
          </select>
        </div>
        <input type="hidden" id="id" name="id" value={user.id} />
        <button
          type="submit"
          className="default-button col-start-2 w-max"
          disabled={loading}
        >
          {loading ? <Spinner /> : "Save"}
        </button>
        <FormResponse
          error={error}
          success={success}
          loading={loading}
          fallbackSuccessMessage="Profile updated correctly"
        />
      </form>
    </Layout>
  ) : null;
};

export default Settings;