import { FC } from "react";
import { useRouter } from "next/router";
import { useForm, Controller } from "react-hook-form";
// ui
import { Input, Button } from "@plane/ui";

export interface EmailForgotPasswordFormValues {
  email: string;
}

export interface IEmailForgotPasswordForm {
  onSubmit: (formValues: any) => Promise<void>;
}

export const EmailForgotPasswordForm: FC<IEmailForgotPasswordForm> = (props) => {
  const { onSubmit } = props;
  // router
  const router = useRouter();
  // form data
  const {
    control,
    handleSubmit,
    formState: { errors, isSubmitting },
  } = useForm<EmailForgotPasswordFormValues>({
    defaultValues: {
      email: "",
    },
    mode: "onChange",
    reValidateMode: "onChange",
  });

  return (
    <form className="space-y-4 mt-10 w-full sm:w-[360px] mx-auto" onSubmit={handleSubmit(onSubmit)}>
      <div className="space-y-1">
        <Controller
          control={control}
          name="email"
          rules={{
            required: "Email address is required",
            validate: (value) =>
              /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
                value
              ) || "Email address is not valid",
          }}
          render={({ field: { value, onChange } }) => (
            <Input
              id="email"
              type="email"
              name="email"
              value={value}
              onChange={onChange}
              hasError={Boolean(errors.email)}
              placeholder="Enter registered email address.."
              className="border-custom-border-300 h-[46px] w-full"
            />
          )}
        />
      </div>
      <div className="mt-5 flex flex-col-reverse sm:flex-row items-center gap-2">
        <Button className="w-full text-center h-[46px]" onClick={() => router.push("/")}>
          Go Back
        </Button>
        <Button type="submit" className="w-full text-center h-[46px]" loading={isSubmitting}>
          {isSubmitting ? "Sending link..." : "Send reset link"}
        </Button>
      </div>
    </form>
  );
};