"use client";
import React, { useState } from "react";

import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
type Inputs = {
  example: string;
  exampleRequired: string;
};
import { useForm, SubmitHandler } from "react-hook-form";
import { error, loading } from "@/config/swal";
import withReactContent from "sweetalert2-react-content";
import Swal from "sweetalert2";
import { useRouter } from "@/i18n/routing";
import { forgotPassword } from "@/service/landing/landing";

const ForgotPass = () => {
  const [username, setUsername] = useState<any>();
  const MySwal = withReactContent(Swal);
  const router = useRouter();

  const {
    register,
    handleSubmit,
    watch,
    formState: { errors },
  } = useForm<Inputs>();
  const onSubmit: SubmitHandler<Inputs> = (data) => console.log(data);

  async function handleCheckUsername() {
    loading();
    const response = await forgotPassword(username);

    if (response.error) {
      error(response.message);
      return false;
    }

    successSubmit();
    return false;
  }

  function successSubmit() {
    MySwal.fire({
      title: "Email berhasil dikirim. Silahkan cek email Anda.",
      icon: "success",
      confirmButtonColor: "#3085d6",
      confirmButtonText: "OK",
    }).then((result: any) => {
      if (result.isConfirmed) {
        router.push("/admin");
      }
    });
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4 ">
      <div className="space-y-2">
        <Label htmlFor="user-name">Username</Label>
        <Input id="user-name" defaultValue="akun1234" className="h-[48px] text-sm text-default-900 " onChange={(e) => setUsername(e.target.value)} />
      </div>

      <Button type="submit" fullWidth onClick={handleCheckUsername}>
        Check Username
      </Button>
      <Button type="submit" fullWidth onClick={handleCheckUsername}>
        Kirim Ulang?{" "}
      </Button>
    </form>
  );
};

export default ForgotPass;