import React from 'react';
import Container from "./container";
import Image from 'next/image';
import { useRouter } from "next/router";

const FlexibleForm = ({ imgPos, data, route}) => {
    const router = useRouter();

    const handleSubmit = async (event) => {
        event.preventDefault();
        const formData = new FormData(event.target);

        try {
            const response = await fetch(data.formAction, {
                method: data.formMethod,
                body: JSON.stringify(Object.fromEntries(formData)),
                headers: {
                    'Content-Type': 'application/json'
                },
            });

            if (!response.ok) {
                throw new Error(response.text());
            }

            console.log('Form submitted successfully');
            if (route) {
                router.push(route);
            }
        } catch (error) {
            console.error('Error submitting form:', error);
        }
    }


    const renderImage = (
        <div className={`flex items-center justify-center w-full lg:w-1/2 hidden lg:flex ${imgPos === "right" ? "lg:order-1" : ""}`}>
            <div>
                <Image
                    src={data.image}
                    width="521"
                    height="auto"
                    alt="Benefits"
                    className={"object-cover"}
                    placeholder="blur"
                    blurDataURL={data.image.src}
                />
            </div>
        </div>
    );

    const renderForm = (
        <div className={`flex items-center justify-center w-full lg:w-1/2 ${data.imgPos === "right" ? "lg:justify-end" : ""}`}>
            <div>
                <div className="flex flex-col w-full mt-4">
                    <h3 className="max-w-2xl mt-3 text-3xl font-bold leading-snug tracking-tight text-gray-800 lg:leading-tight lg:text-4xl dark:text-white">
                        {data.title}
                    </h3>
                    <p className="max-w-2xl text-lg leading-normal text-gray-500 lg:text-xl xl:text-xl dark:text-gray-300">
                        {data.subtitle}
                    </p>
                </div>
                <div className="mt-5 sm:mx-auto sm:w-full sm:max-w-sm">
                    <form onSubmit={handleSubmit}  id="testform" className="space-y-3" action={data.formAction} method={data.formMethod}>
                        {data.formFields.map((field, index) => (
                            <div key={index}>
                                <label htmlFor={field.name} className="block text-sm font-medium leading-6 text-gray-900">{field.label}</label>
                                <div className="mt-0">
                                    <input
                                        id={field.name}
                                        name={field.name}
                                        type={field.type}
                                        autoComplete={field.autoComplete}
                                        required={field.required}
                                        className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
                                    />
                                </div>
                            </div>
                        ))}
                        <div>
                            <button type="submit" className="flex w-full justify-center rounded-md bg-indigo-600 px-10 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
                                {data.ctaText || "Submit"}
                            </button>
                        </div>
                    </form>
                    {data.underneathButton && (
                        <div className="mt-3 text-center">
                            <a href={data.underneathButton.url} className="text-sm text-indigo-600 hover:text-indigo-500">{data.underneathButton.text}</a>
                        </div>
                    )}
                    {data.ctaLink && (
                        <p className="mt-10 text-center text-sm text-gray-500">
                            {data.ctaLink.text} <a href={data.ctaLink.url} className="font-semibold leading-6 text-indigo-600 hover:text-indigo-500">{data.ctaLink.linkText}</a>
                        </p>
                    )}
                </div>
            </div>
        </div>
    );

    return (
        <Container className="flex flex-wrap mb-0 lg:gap-10 lg:flex-nowrap">
            {imgPos === "left" ? renderImage : renderForm}
            {imgPos === "left" ? renderForm : renderImage}
        </Container>
    );
};

export default FlexibleForm;