import { type PublicRoom } from '@frontend/components/rooms/RoomCard';
import { router } from '@inertiajs/react';
import { type FormEvent, useState } from 'react';

export type HomeFaqItem = {
    question: string;
    answer: string;
};

type HomeFaqProps = {
    rooms: PublicRoom[];
    faqs: HomeFaqItem[];
};

export function HomeFaq({ rooms, faqs }: HomeFaqProps) {
    const [checkIn, setCheckIn] = useState('');
    const [checkOut, setCheckOut] = useState('');
    const [adults, setAdults] = useState('1');
    const [children, setChildren] = useState('0');
    const [room, setRoom] = useState('');
    const [extraBeds, setExtraBeds] = useState('0');

    const onSubmit = (event: FormEvent<HTMLFormElement>) => {
        event.preventDefault();
        router.get(route('book'), {
            room,
            check_in: checkIn,
            check_out: checkOut,
            adults,
            children,
            extra_beds: extraBeds,
        });
    };
    return (
        <>
                <section className="faq-section extra-color pt-100 md-pt-80 pb-100 md-pb-80">
                    <div className="background-image" data-img-src="/assets/images/faq/faq-bg.jpg"></div>
                    <div className="container">
                        <div className="row">
                            <div className="col-lg-12">
                                <div className="faq-wapper">
                                    <div className="faq-content">
                                        {/* section title start */}
                                        <div className="section-title wow fadeInUp" data-wow-delay=".2s">
                                            <span className="sub-title">Faq's</span>
                                            <h2 className="line-anime">Clear Answers To Your Questions</h2>
                                        </div>
                                        {/* section title end */}
                                        {/* accordion start */}
                                        <div className="accordion wow fadeInUp" data-wow-delay=".3s" id="home-faq">
                                            {faqs.map((faq, index) => (
                                                <div className="accordion-item" key={faq.question}>
                                                    <h2 className="accordion-header" id={`home-faq-${index}`}>
                                                        <button className={index === 0 ? 'accordion-button' : 'accordion-button collapsed'} type="button" data-bs-toggle="collapse" data-bs-target={`#home-faq-panel-${index}`} aria-expanded={index === 0} aria-controls={`home-faq-panel-${index}`}>
                                                            {faq.question}
                                                        </button>
                                                    </h2>
                                                    <div id={`home-faq-panel-${index}`} className={index === 0 ? 'accordion-collapse collapse show' : 'accordion-collapse collapse'} aria-labelledby={`home-faq-${index}`} data-bs-parent="#home-faq">
                                                        <div className="accordion-body">
                                                            <div className="inner">
                                                                <div className="accordion-content">
                                                                    <p>{faq.answer}</p>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            ))}
                                        </div>
                                        {/* accordion end */}
                                    </div>
                                    <div className="booking-content wow fadeInUp" data-wow-delay=".4s" data-img-src="/assets/images/shape/bg-shape-1.png">
                                        {/* section title start */}
                                        <div className="section-title section-title-white mb-40">
                                            <span className="sub-title">Booking</span>
                                            <h2 className="line-anime">Book Your Seats</h2>
                                        </div>
                                        {/* section title end */}
                                        {/* default form start */}
                                        <div className="default-form booking-form">
                                            <form onSubmit={onSubmit}>
                                                <div className="row">
                                                    <div className="col-lg-6 col-md-6 col-sm-12">
                                                        <div className="form-group">
                                                            <div className="field-inner">
                                                                <label htmlFor="home-check-in">Check In</label>
                                                                <input className="form-control" id="home-check-in" name="check_in" type="date" autoComplete="off" required value={checkIn} onChange={(event) => setCheckIn(event.target.value)} />
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div className="col-lg-6 col-md-6 col-sm-12">
                                                        <div className="form-group">
                                                            <div className="field-inner">
                                                                <label htmlFor="home-check-out">Check Out</label>
                                                                <input className="form-control" id="home-check-out" name="check_out" type="date" autoComplete="off" required value={checkOut} onChange={(event) => setCheckOut(event.target.value)} />
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div className="col-lg-6 col-md-6 col-sm-12">
                                                        <div className="form-group">
                                                            <div className="field-inner">
                                                                <label htmlFor="home-adults">Adults</label>
                                                                <select className="form-select" id="home-adults" aria-label="Select Adults" value={adults} onChange={(event) => setAdults(event.target.value)}>
                                                                    <option value="1">01</option>
                                                                    <option value="2">02</option>
                                                                    <option value="3">03</option>
                                                                    <option value="4">04</option>
                                                                </select>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div className="col-lg-6 col-md-6 col-sm-12">
                                                        <div className="form-group">
                                                            <div className="field-inner">
                                                                <label htmlFor="home-children">Children</label>
                                                                <select className="form-select" id="home-children" aria-label="Select Children" value={children} onChange={(event) => setChildren(event.target.value)}>
                                                                    <option value="0">00</option>
                                                                    <option value="1">01</option>
                                                                    <option value="2">02</option>
                                                                    <option value="3">03</option>
                                                                    <option value="4">04</option>
                                                                </select>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div className="col-lg-6 col-md-6 col-sm-12">
                                                        <div className="form-group">
                                                            <div className="field-inner">
                                                                <label htmlFor="home-room">Room</label>
                                                                <select className="form-select" id="home-room" aria-label="Select Room" required value={room} onChange={(event) => setRoom(event.target.value)}>
                                                                    <option value="">Select Room</option>
                                                                    {rooms.map((item) => (
                                                                        <option key={item.slug} value={item.slug}>{item.name}</option>
                                                                    ))}
                                                                </select>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div className="col-lg-6 col-md-6 col-sm-12">
                                                        <div className="form-group">
                                                            <div className="field-inner">
                                                                <label htmlFor="home-extra-bed">Extra Bed</label>
                                                                <select className="form-select" id="home-extra-bed" aria-label="Select Extra Bed" value={extraBeds} onChange={(event) => setExtraBeds(event.target.value)}>
                                                                    <option value="0">00</option>
                                                                    <option value="1">01</option>
                                                                    <option value="2">02</option>
                                                                    <option value="3">03</option>
                                                                    <option value="4">04</option>
                                                                </select>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div className="col-lg-12">
                                                        <div className="appointment-button-wapper text-center mt-10">
                                                            <button type="submit" className="theme-button style-1" data-text="Check Availability">
                                                                Check Availability
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                        {/* default form end */}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
        </>
    );
}