import { format } from 'moment';
import React from 'react';
import { useFormik } from 'formik';
import axios from 'axios';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
import moment from 'moment';
import Loader from "@/components/UI/Loader";
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

export default function BookingFormModel({ onClose, vehicleData }) {
   const toastMessage=toast.success("book a taxi successfully")
    const [loading, setLoading] = React.useState(false)

    const base_Url=process.env.NEXT_PUBLIC_DOMAIN

    const formik = useFormik({
        initialValues: {
            name: '',
            vehicle_type_id: '',
            number_of_passenger: '',
            phone_number: '',
            email: '',
            travel_date: new Date(),
            description: '',
        },
        onSubmit: async (values) => {
            try {
                setLoading(true)
                const formattedDate = moment(values.travel_date).format('YYYY-MM-DD HH:mm:ss');
                const payload = {
                    ...values,
                    travel_date: formattedDate,
                };
                const response = await axios.post(`${base_Url}/bookTaxiDetails`, payload);
                setLoading(false)
                //console.log('Form submitted successfully:', response.data);
                onClose();
                toastMessage();
            } catch (error) {
                console.error('Error submitting the form:', error);
            }
        },
    });

    return (
        <>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            
            {
            loading ? (
                <Loader />
            ) : (<div className="modal show" tabIndex="-1" style={{ display: 'block' }} aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div className="modal-dialog">
                    <div className="modal-content">
                        <div className="modal-header">
                            <h5 className="modal-title" id="exampleModalLabel">Book A Taxi</h5>
                            <button type="button" className="btn-close" onClick={onClose}></button>
                        </div>
                        <div className="modal-body">
                            <div className="container">
                                <div className="row justify-content-center">
                                    <div className="col">
                                        <div className="modal-image">
                                            {/* Display the image of the first vehicle */}
                                            <img
                                                src="img/Springfield-Yellow-Cab-1.jpg"
                                                alt="Vehicle"
                                                style={{ maxWidth: '100%' }}
                                            />
                                        </div>
                                        <div className="about-button-group-1">
                                            <div className="call-btn">
                                                <a href="tel:+468254762443" className="btn-icon ripple">
                                                    <i className="fas fa-phone-alt"></i>
                                                </a>
                                                <div className="call-text-1">
                                                    <span>Call me at:</span>
                                                    <br />
                                                    <a href="tel:+468254762443" className="btn-title">(+91)9825476243</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div className="col">
                                        <form className="data-form" onSubmit={formik.handleSubmit}>
                                            <div className="row g-3">
                                                <div className="col-md-6">
                                                    <input
                                                        type="text"
                                                        className="form-control form-1"
                                                        id="your-name"
                                                        name="name"
                                                        placeholder="Name"
                                                        required
                                                        value={formik.values.name}
                                                        onChange={formik.handleChange}
                                                    />
                                                </div>
                                                <div className="col-md-6">
                                                    <input
                                                        type="text"
                                                        className="form-control form-1"
                                                        id="your-number"
                                                        name="phone_number"
                                                        placeholder="Phone Number"
                                                        required
                                                        value={formik.values.phone_number}
                                                        onChange={formik.handleChange}
                                                    />
                                                </div>
                                                <div className="col-md-6">
                                                    <input
                                                        type="email"
                                                        className="form-control form-1"
                                                        id="your-email"
                                                        name="email"
                                                        placeholder="Email"
                                                        value={formik.values.email}
                                                        onChange={formik.handleChange}
                                                    />
                                                </div>
                                                <div className="col-md-6">
                                                    <select
                                                        className="form-select form-control form-1"
                                                        aria-label="Default select example"
                                                        name="vehicle_type_id"
                                                        required
                                                        value={formik.values.vehicle_type_id}
                                                        onChange={formik.handleChange}
                                                    >
                                                        <option value="">Select Vehicle</option>
                                                        {vehicleData.map(vehicle => (
                                                            <option key={vehicle.id} value={vehicle.vehicle_type_id}>
                                                                {vehicle.get_make.name} {vehicle.get_model.name} ({vehicle.model_year})
                                                            </option>
                                                        ))}
                                                    </select>
                                                </div>
                                                <div className="col-md-12">
                                                    <DatePicker
                                                        selected={formik.values.travel_date}
                                                        onChange={date => formik.setFieldValue('travel_date', date || new Date())}
                                                        showTimeSelect
                                                        dateFormat="Pp"
                                                        className="form-control form-1"
                                                        placeholderText="Date & Time"
                                                        required
                                                    />
                                                </div>
                                                <div className="col-md-12">
                                                    <input
                                                        type="text"
                                                        className="form-control form-1"
                                                        id="your-subject"
                                                        name="number_of_passenger"
                                                        placeholder="No of Passengers"
                                                        required
                                                        value={formik.values.number_of_passenger}
                                                        onChange={formik.handleChange}
                                                    />
                                                </div>
                                                <div className="col-12">
                                                    <textarea
                                                        className="form-control form-1"
                                                        id="your-message"
                                                        name="description"
                                                        rows="4"
                                                        placeholder="Description..."
                                                        required
                                                        value={formik.values.description}
                                                        onChange={formik.handleChange}
                                                    ></textarea>
                                                </div>
                                                <div className="col-12">
                                                    <div className="row">
                                                        <div className="submit-grp">
                                                            <button type="submit" className="btn fw-bold w-100 style-skew">
                                                                <span>BOOK TAXI NOW</span>
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            )}
        </>
    );
}