"use client";
import React, { ChangeEvent, FormEvent, useEffect, useState } from "react";
import {
  Card,
  Typography,
  Input,
  Checkbox,
  Button,
} from "@material-tailwind/react";
import Image from "next/image";
import { Account } from "@/api/account.api";
import { ModalAlert } from "@/ui/components/modal/modal-alert";
import { ModalSuccess } from "@/ui/components/modal/modal-success";
import { Loading } from "@/ui/loader/loading";
import { useRouter } from "next/navigation";
import Link from "next/link";

interface FormData {
 // username: string;
  nom:string;
  email: string;
  password: string;
  phone_number:string;
  // phone_number: string;
}

export default function Register() {
  const [formData, setFormData] = useState<FormData>({
    nom:"",
    email: "",
    phone_number:"",
    password: "",

    // phone_number: "",
  });

  const [open, setOpen] = useState(false);
  const [openSuccess, setOpenSuccess] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
  const handleOpen = () => setOpen(!open);
  const handleOpenSuccess = () => setOpenSuccess(!openSuccess);
  const [result, setResult] = useState("");
  const [error, setError] = useState("");
  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;
    setFormData((prevData) => ({ ...prevData, [name]: value }));
  };
  const router = useRouter();
  useEffect(() => {
    if (Account.isAuth()) {
      router.push("/");
    }
  }, []);
  const handleSubmit = async (e: FormEvent) => {
    e.preventDefault();
    setIsLoading(true);
    try {
      const data = await Account.register(formData);
      setIsLoading(false);
      handleOpenSuccess();
      if (data) {
        setTimeout(() => {
          router.push("/account/login");
        }, 3000);
      }
    } catch (error: any) {
      console.log(error);
      if (error.response) {
        setError(error.response.data.message);
        handleOpen();
      } else if (error.message) {
        alert(error.message);
      }
      setIsLoading(false);
    }
  };
  return (
    <div className="h-screen flex justify-center items-center">
      {isLoading && <Loading/>}
      <Card
        color="transparent"
        className="flex flex-col justify-center"
        shadow={false}
      >
        <Image
          src="/assets/img-bsl/logo bsl.png"
          alt="logo"
          className="m-auto"
          width="200"
          height="48"
        />
        <Typography variant="h4" className="text-center" color="blue-gray">
          Inscription à la plateforme BSL Academy.
        </Typography>
        <Typography color="gray" className="mt-1 text-center font-normal">
          Remplissez les champs suivants pour vous inscrire
        </Typography>
        <form
          onSubmit={handleSubmit}
          className="mt-8 mx-auto mb-2 w-80 max-w-screen-lg sm:w-96"
        >
          <div className="mb-4 flex flex-col gap-6">
            {/* <Input
              size="lg"
              label="login"
              name="username"
              value={formData.username}
              onChange={handleChange}
              crossOrigin={undefined}
            /> */}
            <Input
              required
              size="lg"
              label="Nom et prenom"
              name="nom"
              value={formData.nom}
              onChange={handleChange}
              crossOrigin={undefined}
            />
            <Input
              required
              size="lg"
              label="Téléphone"
              type="number"
              name="phone_number"
              value={formData.phone_number}
              onChange={handleChange}
              crossOrigin={undefined}
            />
            <Input
              required
              type="email"
              size="lg"
              label="Email"
              name="email"
              value={formData.email}
              onChange={handleChange}
              crossOrigin={undefined}
            />
            <Input
              type="password"
              size="lg"
              label="Mot de passe"
              name="password"
              value={formData.password}
              onChange={handleChange}
              crossOrigin={undefined}
              required
            />
          </div>
          <Checkbox
          required
            label={
              <Typography
              
                variant="small"
                color="gray"
                className="flex items-center font-normal"
              >
                J'accepte
                <a
                  href="#"
                  className="font-medium transition-colors hover:text-gray-900"
                >
                  &nbsp;les Conditions d'utilisation
                </a>
              </Typography>
            }
            containerProps={{ className: "-ml-2.5" }}
            crossOrigin={undefined}
          />
          <Button type="submit" className="mt-6 bg-vert_fonce" fullWidth>
            S'inscrire
          </Button>
          <Typography color="gray" className="mt-4 text-center font-normal">
            Deja inscrit?{" "}
            <Link href="/account/login" className="font-medium text-gray-900">
              Se connecter
            </Link>
          </Typography>
        </form>
      </Card>
      <ModalAlert handleOpen={handleOpen} message={error} open={open} />
      <ModalSuccess
        handleOpen={handleOpenSuccess}
        message={result}
        open={openSuccess}
      />
    </div>
  );
}