'use client';

import { ContactForm } from '@/features/contact/ContactForm';

import { useRouter, useSearchParams } from 'next/navigation';
import { useEffect, useRef } from 'react';

interface ContactCarFormProps {
  carName: string;
}

export const ContactCarForm = ({ carName }: ContactCarFormProps) => {
  const router = useRouter();
  const searchParams = useSearchParams();
  const formRef = useRef<HTMLDivElement>(null);

  // Autoabrir si viene con ?openForm=true
  useEffect(() => {
    if (searchParams.get('openForm') === 'true') {
      // Limpio el query param para que un refresh no reabra el form
      // ni quede feo en la barra de direcciones
      const params = new URLSearchParams(searchParams.toString());
      params.delete('openForm');
      const query = params.toString();
      router.replace(query ? `?${query}` : window.location.pathname, { scroll: false });
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <section id="register" className="px-4 py-21.25 md:px-10 lg:px-28">
      <div className="overflow-hidden">
        <div className="mt-9 px-0 lg:px-16">
          <div ref={formRef}></div>
          <h3 className="mb-8 hidden text-center text-2xl font-light lg:block">
            Contanos qué estás buscando y uno de nuestros especialistas te asesorará
          </h3>

          <h3 className="mb-8 text-center text-lg font-light lg:hidden">
            Dejanos tu mensaje y datos
          </h3>
          <div className="malek-containter px-4 lg:px-48">
            <ContactForm carName={carName} />
          </div>
        </div>
      </div>
    </section>
  );
};