'use client';

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

export default function NameForm({ userName }: { userName: string }) {
  const router = useRouter();
  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    setIsSubmitting(true);
    // Check if the new name is the same as the old name
    if (e.currentTarget.fullName.value === userName) {
      e.preventDefault();
      setIsSubmitting(false);
      return;
    }
    handleRequest(e, updateName, 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">Максимум 64 символа</p>
          <Button
            variant="slim"
            type="submit"
            form="nameForm"
            loading={isSubmitting}
            className="btn btn-primary"
          >
            Обнови Име
          </Button>
        </div>
      }
    >
      <div className="flex items-center gap-3">
        <div className="bg-transparent p-3 rounded-lg">
          <FaUser className="w-5 h-5 text-primary" />
        </div>
        <form id="nameForm" onSubmit={(e) => handleSubmit(e)} className="flex-1">
          <input
            type="text"
            name="fullName"
            className="input input-bordered w-full max-w-md bg-transparent"
            defaultValue={userName}
            placeholder="Вашето име"
            maxLength={64}
          />
        </form>
      </div>
    </Card>
  );
}