'use client';

import Button from '@/components/ui/Button';
import Card from '@/components/ui/Card';
import { updateEmail } from '@/utils/auth-helpers/server';
import { handleRequest } from '@/utils/auth-helpers/client';
import { useRouter } from 'next/navigation';
import { useState } from 'react';
import { FaEnvelope } from 'react-icons/fa';

export default function EmailForm({
  userEmail
}: {
  userEmail: string | undefined;
}) {
  const router = useRouter();
  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    setIsSubmitting(true);
    // Check if the new email is the same as the old email
    if (e.currentTarget.newEmail.value === userEmail) {
      e.preventDefault();
      setIsSubmitting(false);
      return;
    }
    handleRequest(e, updateEmail, router);
    setIsSubmitting(false);
  };

  return (
    <Card
      title="Вашият Имейл"
      description="Моля, въведете имейл адреса, който искате да използвате за вход."
      footer={
        <div className="flex flex-col items-start justify-between sm:flex-row sm:items-center">
          <p className="pb-4 sm:pb-0 text-base-content/70">
            Ще ви изпратим имейл за потвърждение на промяната.
          </p>
          <Button
            variant="slim"
            type="submit"
            form="emailForm"
            loading={isSubmitting}
            className="btn btn-primary"
          >
            Обнови Имейл
          </Button>
        </div>
      }
    >
      <div className="flex items-center gap-3">
        <div className="bg-transparent p-3 rounded-lg">
          <FaEnvelope className="w-5 h-5 text-primary" />
        </div>
        <form id="emailForm" onSubmit={(e) => handleSubmit(e)} className="flex-1">
          <input
            type="email"
            name="newEmail"
            className="input input-bordered w-full max-w-md bg-transparent"
            defaultValue={userEmail ?? ''}
            placeholder="Вашият имейл"
            maxLength={64}
          />
        </form>
      </div>
    </Card>
  );
}