"use client";
import React, { useState } from "react";
import AvailableVehicleCard from "./availableVehicleCard";
import BookingFormModel from "../models/bookingFormModel";

export default function AvailableVehicle({ AvailableVehicleData }) {

    const itemsPerPage = 5;
    const PhoneNumber = AvailableVehicleData?.user.phone_number;
    const VehicleData = AvailableVehicleData?.user.transporters[0].vehicle;

    const [selectedCategory, setSelectedCategory] = useState(VehicleData[0].id);
    const [currentPage, setCurrentPage] = useState(1);
    const [showForm, setShowForm] =useState(false);
    const indexOfLastItem = currentPage * itemsPerPage;
    const indexOfFirstItem = indexOfLastItem - itemsPerPage;
    const currentItems = VehicleData.slice(indexOfFirstItem, indexOfLastItem);
    const totalPages = Math.ceil(VehicleData.length / itemsPerPage);

    const handleOpenModel = () => {
        setShowForm(true);
    };

    const handleCloseModel = () => {
        setShowForm(false);
    };

    const handleNextPage = () => {
        setCurrentPage((prevPage) => Math.min(prevPage + 1, totalPages));
    };

    const handlePreviousPage = () => {
        setCurrentPage((prevPage) => Math.max(prevPage - 1, 1));
    };

    const handleFilterData = (id) => {
        setSelectedCategory(id);
    };

    const AvailableVehicleButtonGroup = ({ data }) => (
        <li className="nav-item" role="presentation">
            <button
                className={`nav-link style-skew fw-semibold ${selectedCategory === data.id ? "active" : ""}`}
                onClick={() => handleFilterData(data.id)}
            >
                <span>{data.get_make.name} {data.get_model.name}</span>
            </button>
        </li>
    );

    return (
        <>
            <section className="available">
                <div className="container">
                    <div className="row">
                        <div className="col-12">
                            <div className="hh">
                                <span className="small-text">Book Taxi</span>
                                <h2>{AvailableVehicleData?.services_heading}</h2>
                                <p>{AvailableVehicleData?.services_description}</p>
                            </div>
                        </div>
                    </div>
                </div>

                <div className="container">

                    <div className="tab-buttons">
                        <ul className="nav nav-pills mb-3" id="pills-tab" role="tablist">
                            {currentItems.map((item) => (
                                <AvailableVehicleButtonGroup data={item} key={item.id} />
                            ))}
                        </ul>

                    </div>

                    <div className="available-wrap">
                        <div className="tab-content" id="pills-tabContent">
                            {VehicleData.filter(item => item.id === selectedCategory).map((item) => (
                                <AvailableVehicleCard openModel={handleOpenModel}data={item} key={item.id} phone={PhoneNumber} />
                            ))}
                        </div>
                    </div>
                    <div className="pegination">
                        <button
                            onClick={handlePreviousPage}
                            disabled={currentPage === 1}
                            className="pagination-button"
                        >
                            Previous
                        </button>
                        <span className="pagination-info">
                            Page {currentPage} of {totalPages}
                        </span>
                        <button
                            onClick={handleNextPage}
                            disabled={currentPage === totalPages}
                            className="pagination-button"
                        >
                            Next
                        </button>
                    </div>
                </div>
            </section>
            <section className="track_wrap">
                <div className="moving_Car movingX">
                    <img src="img/taxi_4.png" alt="" />
                </div>
                <div className="track"></div>
            </section>
            {showForm && (
                <>
                    <div className="modal-backdrop fade show"></div>
                    <BookingFormModel onClose={handleCloseModel} vehicleData={ AvailableVehicleData.user.transporters[0].vehicle}/>
                </>
            )}
        </>
    );
}