import { useState } from "react";
import CustomImage from "@/helper/customImage";
import { BookingForm} from "@/pages/search";
import { Modal } from "react-bootstrap";
import { CustomCarouselMain } from "@/views/carousel/EmblaCarousel";

const TitleGallery = ({ hotelDetail }: { hotelDetail: any }) => {

  const [selectedImage, setSelectedImage] = useState()
  const [showModal, setShowModal] = useState(false);


  const handleBookNow = () => {
    setShowModal(true);
  };

  const handleCloseModal = () => {
    setShowModal(false);
  };



  return (
    <>
      <div className="container" style={{ overflowX: 'hidden' }}>
        <p className="page-step-fnt">Home / {hotelDetail?.category?.name} / {hotelDetail?.name}</p>
        <div className="d-flex mt-2 justify-content-end">
          <a href="#" className="text-decoration-none">
            <p className="para-revw-star share-list-icon">
              <i className="bi bi-box-arrow-up-right"></i> Share
            </p>
          </a>
          <a href="#" className="text-decoration-none">
            <p className="para-revw-star ms-4 share-list-icon">
              <i className="bi bi-heart"></i> Wishlist
            </p>
          </a>
        </div>
        <div className="row">
          <div className="col-md-7">
            <div className="detail-bnnr">

              {hotelDetail?.images?.length > 0 && <CustomImage
                src={selectedImage || hotelDetail?.images[0]}
                alt="gallery image"
                className="img-fluid title-grly-image"
              />}
            </div>
            <div className="col-md-12 mt-1 detail-dktp">
              <CustomCarouselMain axis="x">
                {hotelDetail?.images?.length > 0 &&
                  hotelDetail?.images.map((img: any, index: any) => {

                    return (
                      <>
                        <div className="gallery-img" key={index} onClick={() => {
                          setSelectedImage(img)
                        }}>
                          <CustomImage
                            src={img}
                            alt="gallery image"
                            className="img-fluid title-grly-image"
                          />
                        </div>
                      </>
                    );
                  })}
              </CustomCarouselMain>


            </div>
          </div>
          <div className="col-md-5">
            {hotelDetail && (
              <>
                <h1 className="heading-title-dtls">{hotelDetail.name}</h1>

                <div className="d-flex">
                  {/* <RatingStart count={hotelDetail?.averageRating} total={hotelDetail?.ratingsCount} /> */}

                  <p className="para-revw-star mb-3">
                    <i className="bi bi-geo-alt-fill"></i> {hotelDetail?.location}
                  </p>
                  <p className="para-revw-star ms-3">
                    <i className="bi bi-bookmarks-fill"></i> {hotelDetail?.numBookings}+ Booked
                  </p>
                </div>
              </>
            )}

            <div className="row">
              <p>Lowest Room Price: ₹<b>{hotelDetail?.priceRange.lowestPrice}</b> </p>
              <p>Highest Room Price: ₹<b>{hotelDetail?.priceRange.highestPrice}</b> </p>

              <div className="bk-btn-o">
                <button className="searchs-book-btns" onClick={handleBookNow}>Book Now</button>
              </div>
              <div className="bk-btn-o">
                <a className="call-now-btn" href="tel:+919584872001">Instant Call</a>
              </div>

              <Modal show={showModal} onHide={handleCloseModal}>
                <Modal.Header closeButton>
                  <Modal.Title>Book Hotel</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                  {hotelDetail && (
                    <div>
                      <h5>{hotelDetail?.hotel_name}</h5>
                      <p>{hotelDetail?.location}</p>
                      <p className="d-flex align-items-center">Price: ₹ <b style={{ fontSize: '23px' }}>{hotelDetail?.priceRange.highestPrice || hotelDetail?.lowestPrice}</b></p>

                      <BookingForm
                        hotel={hotelDetail}
                        handleCloseModal={handleCloseModal}
                      />

                    </div>
                  )}
                </Modal.Body>
              </Modal>
            </div>

          </div>


          <div className="col-md-12 detail-slider">
            {/* <CustomCarouselMain axis="x">
              {hotelDetail?.images?.length > 0 &&
                hotelDetail?.images.map((img: any, index: any) => {

                  return (
                    <>
                      <div className="gallery-img" key={index} onClick={() => {
                        setSelectedImage(img)
                      }}>
                        <CustomImage
                          src={img}
                          alt="gallery image"
                          className="img-fluid title-grly-image"
                        />
                      </div>
                    </>
                  );
                })}
            </CustomCarouselMain> */}
            {/* <Slider {...menuslides}>

              {hotelDetail?.images?.length > 0 &&
                hotelDetail?.images.map((img: any, index: any) => {

                  return (
                    <>
                      <div className="" key={index} onClick={() => {
                        setSelectedImage(img)
                      }}>
                        <CustomImage
                          src={img}
                          alt="gallery image"
                          className="img-fluid title-grly-image"
                        />
                      </div>
                    </>
                  );
                })}
            </Slider> */}
          </div>
        </div>


      </div >
    </>
  );
};

export default TitleGallery;



const RatingStart = ({ count, total }: { count: number, total?: number }) => {
  const star = Math.floor(count);
  const ratStar = count - star;
  return (
    <>
      <p className="para-revw-star mt-1">
        {[...Array(star)].map((_, index) => (
          <i key={index} className="bi bi-star-fill review-star-rate"></i>
        ))}
        {ratStar > 0 && <i className="bi bi-star-half review-star-rate"></i>}
        {total && `(${total})`}
      </p>
    </>
  )
}