import { TurnstileField } from '@frontend/components/forms/TurnstileField';
import { PageBreadcrumb } from '@frontend/components/layout/PageBreadcrumb';
import { SocialLinks } from '@frontend/components/layout/SocialLinks';
import { useSiteChrome } from '@frontend/lib/site-chrome';
import { useForm, usePage } from '@inertiajs/react';
import { type FormEvent, useState } from 'react';

export type ResortContact = {
    phone: string;
    phoneHref: string;
    email: string;
    emailHref: string;
    whatsapp: string;
    whatsappHref: string;
    address: string;
    locationSummary: string;
    mapEmbedSrc: string;
};

function AddressText({ address }: { address: string }) {
    const lines = address.split(/\r?\n/).map((line) => line.trim()).filter(Boolean);

    return (
        <h2 className="contact-content-text">
            {lines.map((line, index) => (
                <span key={line}>
                    {index > 0 && <br />}
                    {line}
                </span>
            ))}
        </h2>
    );
}

type FlashProps = {
    flash?: {
        success?: { message?: string };
    };
};

export function ContactMain({ contact }: { contact: ResortContact }) {
    const { socials } = useSiteChrome();
    const { flash } = usePage<FlashProps>().props;
    const [widgetKey, setWidgetKey] = useState(0);
    const { data, setData, post, processing, errors, reset } = useForm({
        name: '',
        email: '',
        phone: '',
        subject: '',
        message: '',
        turnstile_token: '',
    });

    const onSubmit = (event: FormEvent<HTMLFormElement>) => {
        event.preventDefault();
        post(route('contact.store'), {
            preserveScroll: true,
            onSuccess: () => {
                reset();
                setWidgetKey((value) => value + 1);
            },
        });
    };
    return (
        <>

                <PageBreadcrumb page="contact" />

                {/* contact section start */}
                <section className="contact-section pt-100 md-pt-80 pb-100 md-pb-80">
                    <div className="container">
                        <div className="row justify-content-between">
                            <div className="col-xl-4 col-lg-5"> 
                                {/* contact item wrapper start */}
                                <div className="contact-item-wrapper wow fadeInUp" data-wow-delay=".3s">
                                    {/* contact items start */}
                                    {contact.phone !== '' && (
                                    <div className="contact-item">
                                        <div className="contact-icon"><i className="fa-solid fa-phone-volume"></i></div>
                                        <div className="contact-content">
                                            <p className="contact-content-title">Call Now</p>
                                            <h2 className="contact-content-text"><a href={contact.phoneHref}>{contact.phone}</a></h2>
                                        </div>
                                    </div>
                                    )}
                                    {/* contact items end */}
                                    {/* contact items start */}
                                    {contact.whatsapp !== '' && (
                                    <div className="contact-item">
                                        <div className="contact-icon"><i className="fa-brands fa-whatsapp"></i></div>
                                        <div className="contact-content">
                                            <p className="contact-content-title">WhatsApp</p>
                                            <h2 className="contact-content-text">
                                                <a href={contact.whatsappHref} target="_blank" rel="noopener noreferrer">{contact.whatsapp}</a>
                                            </h2>
                                        </div>
                                    </div>
                                    )}
                                    {contact.email !== '' && (
                                    <div className="contact-item">
                                        <div className="contact-icon"><i className="fa-solid fa-envelope"></i></div>
                                        <div className="contact-content">
                                            <p className="contact-content-title">Email</p>
                                            <h2 className="contact-content-text"><a href={contact.emailHref}>{contact.email}</a></h2>
                                        </div>
                                    </div>
                                    )}
                                    {/* contact items end */} 
                                    {/* contact items start */}
                                    {contact.address !== '' && (
                                    <div className="contact-item">
                                        <div className="contact-icon"><i className="fa-solid fa-location-dot"></i></div>
                                        <div className="contact-content">
                                            <p className="contact-content-title">Address</p>
                                            <AddressText address={contact.address} />
                                            {contact.locationSummary !== '' && (
                                                <p className="location-summary">{contact.locationSummary}</p>
                                            )}
                                        </div>
                                    </div>
                                    )}
                                    {/* contact items end */}  
                                </div>
                                {/* contact item wrapper end */} 
                                {/* contact social links start */}
                                {socials.length > 0 && (
                                <div className="contact-social-links wow fadeInUp" data-wow-delay=".4s"> 
                                    <span className="follow-text">Follow Us Today :</span>
                                    <SocialLinks />
                                </div>
                                )}
                                {/* contact social links end */}
                            </div>
                            <div className="col-xl-7 col-lg-7"> 
                                {/* contact form box start */}
                                <div className="contact-form-box wow fadeInUp" data-wow-delay=".2s">
                                    {/* section title start */}
                                    <div className="section-title section-title-white">
                                        <span className="sub-title">Send us email</span>
                                        <h2 className="line-anime">Feel free to write</h2>
                                    </div>
                                    {/* section title end */}
                                    {/* default-form start */}
                                    <div className="default-form contact-form">
                                        <form id="contact" onSubmit={onSubmit}>
                                            <div className="row">
                                                {flash?.success?.message && (
                                                    <div className="col-lg-12">
                                                        <p className="mb-20">{flash.success.message}</p>
                                                    </div>
                                                )}
                                                <div className="col-lg-6 col-md-6">
                                                    <div className="form-group">
                                                        <div className="field-inner">
                                                            <label htmlFor="name">Name*</label>
                                                            <input id="name" className="form-control" name="name" type="text" autoComplete="name" placeholder="Ex. name" required value={data.name} onChange={(event) => setData('name', event.target.value)} />
                                                            {errors.name && <span className="error">{errors.name}</span>}
                                                        </div>
                                                    </div>
                                                </div>
                                                <div className="col-lg-6 col-md-6">
                                                    <div className="form-group">
                                                        <div className="field-inner">
                                                            <label htmlFor="email">Email*</label>
                                                            <input id="email" className="form-control" name="email" type="email" autoComplete="email" placeholder="Ex. info@example.com" required value={data.email} onChange={(event) => setData('email', event.target.value)} />
                                                            {errors.email && <span className="error">{errors.email}</span>}
                                                        </div>
                                                    </div>
                                                </div>
                                                <div className="col-lg-6 col-md-6">
                                                    <div className="form-group">
                                                        <div className="field-inner">
                                                            <label htmlFor="phone">Phone Number*</label>
                                                            <input id="phone" className="form-control" name="phone" type="text" autoComplete="tel" placeholder="Ex. +255 737 562 788" required value={data.phone} onChange={(event) => setData('phone', event.target.value)} />
                                                            {errors.phone && <span className="error">{errors.phone}</span>}
                                                        </div>
                                                    </div>
                                                </div>
                                                <div className="col-lg-6 col-md-6">
                                                    <div className="form-group">
                                                        <div className="field-inner">
                                                            <label htmlFor="subject">Subject*</label>
                                                            <input id="subject" className="form-control" name="subject" type="text" autoComplete="off" placeholder="Ex. Subject Here" required value={data.subject} onChange={(event) => setData('subject', event.target.value)} />
                                                            {errors.subject && <span className="error">{errors.subject}</span>}
                                                        </div>
                                                    </div>
                                                </div>
                                                <div className="col-lg-12">
                                                    <div className="form-group">
                                                        <div className="field-inner">
                                                            <label htmlFor="message">Message*</label>
                                                            <textarea id="message" className="form-control" name="message" autoComplete="off" placeholder="Ex. type message" required value={data.message} onChange={(event) => setData('message', event.target.value)}></textarea>
                                                            {errors.message && <span className="error">{errors.message}</span>}
                                                        </div>
                                                    </div>
                                                </div>
                                                <div className="col-lg-12">
                                                    <TurnstileField error={errors.turnstile_token} resetKey={widgetKey} onToken={(token) => setData('turnstile_token', token)} />
                                                </div>
                                                <div className="col-lg-12">
                                                    <div className="contact-btn-wapper mt-10">
                                                        <button type="submit" className="theme-button style-1" data-text="Send Message" disabled={processing}>
                                                            Send Message
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                    {/* default-form end */}
                                </div>
                                {/* contact form box end */}
                            </div>
                        </div> 
                    </div>
                </section>
                {/* contact section end */}

                {/* Google Map start */}
                <section className="google-map">
                    <div className="container-fluid">
                        <div className="row">
                            <div className="col-lg-4 p-0">
                                <div className="agent-item">
                                    <div className="agent-image">
                                        <figure>
                                            <i className="fa-brands fa-whatsapp" aria-hidden="true"></i>
                                        </figure>
                                    </div>
                                    <div className="agent-content">
                                        <h2>Ask via WhatsApp</h2>
                                        {contact.whatsapp !== '' && <p>{contact.whatsapp}</p>}
                                        {contact.whatsappHref !== '' && (
                                            <div className="agent-button-wapper">
                                                <a href={contact.whatsappHref} className="theme-button style-1" aria-label="Ask via WhatsApp" target="_blank" rel="noopener noreferrer">
                                                    Ask via WhatsApp
                                                </a>
                                            </div>
                                        )}
                                    </div>
                                </div>
                            </div>
                            <div className="col-lg-8 p-0">
                                {/* google map iframe start */}
                                <div className="google-map-iframe">
                                    <iframe
                                        src={contact.mapEmbedSrc}
                                        allowFullScreen
                                        loading="lazy"
                                        referrerPolicy="no-referrer-when-downgrade"
                                        title="Chato Beach Resort, Muungano Street, Chato"
                                    ></iframe>
                                </div>
                                {/* google map iframe end */}
                            </div>
                        </div>
                    </div>
                </section>
                {/* Google Map end */}

            
        </>
    );
}