import Image from "next/image";
import React, { Fragment, useState } from "react";
import { Button } from "react-bootstrap";
import { fadeIn, zoomIn, slideFromLeft, slideFromRight } from "../animationvariants.js";
import { motion } from "framer-motion";

const DetailInfo = ({ activityById }) => {
  const [showInfo, setShowInfo] = useState(false);
  const [isToggled, setIsToggled] = useState(false);

  const handleClick = () => {
    setIsToggled(!isToggled);
  };
  const handleMouseEnter = () => {
    setShowInfo(true);
  };

  const handleMouseLeave = () => {
    setShowInfo(false);
  };
  return (
    <Fragment>
      <div className="row">
        <div className="col-12">
          <div className="product-info">
            <div className="hide-on-mobile">
              <div className="top-row">
                <div className="most-booked">Most Booked</div>

                <div className="wishlist-share">
                  <a href="#" className={`add-to-wishlist ${isToggled ? "active" : ""}`} onClick={handleClick}>
                    <span className="image-container">
                      <Image layout="fill" alt="" className="image img-fluid" src={isToggled ? "/images/icons/wishlist-01-active.svg" : "/images/icons/wishlist-01.svg"} />
                    </span>
                  </a>
                  <a href="#" className="add-to-forwardt">
                    <span className="image-container">
                      <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/forward.svg" />
                    </span>
                  </a>
                </div>
              </div>
              <motion.div variants={slideFromRight(0.4)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}>
                <div className="product-name">{activityById.data.attributes.name}</div>
              </motion.div>
            </div>
            <div className="product-reviews">
              <span className="rating">{activityById.data.attributes.rating}</span>
              <span className="review">1,365 Reviews</span>
              <span className="star">
                <a href="">
                  <span className="image-container">
                    <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" />
                  </span>
                </a>
                <a href="">
                  <span className="image-container">
                    <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" />
                  </span>
                </a>
                <a href="">
                  <span className="image-container">
                    <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" />
                  </span>
                </a>
                <a href="">
                  <span className="image-container">
                    <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" />
                  </span>
                </a>
                <a href="">
                  <span className="image-container">
                    <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" />
                  </span>
                </a>
              </span>
            </div>
            <div className="mb-2">Per Person</div>
            <div className="price">
              ${activityById.data.attributes.pricePerPerson} {activityById.data.attributes.offers && <span>{activityById.data.attributes.offers}% Off</span>}
            </div>
            <div className="mb-4">
            {activityById.data.attributes.description}
            </div>
            <div className="location">
              Location & Address <span>{activityById.data.attributes.activityType}</span>
            </div>
            <div className="mb-2">Chelsea </div>
            <div className="">{activityById.data.attributes.address}</div>
            <div className="btn-row">
              <Button variant="primary me-3">Book Now</Button>
              <Button variant="secondary">
                Gift Now{" "}
                <span className="image-container btn-gift">
                  <Image layout="fill" className="image img-fluid" src="/images/icons/gift-card-icon.svg" />
                </span>
              </Button>
            </div>
          </div>
        </div>
      </div>
      <div className="row hide-on-desktop">
        <div className="col-12">
          <ul className="availability-wrappper">
            <li>
              <span className="image-container">
                <Image layout="fill" alt="" className="image img-fluid" src="/images/availability/month.svg" />
              </span>
              From: {activityById.data.attributes.fromDate} To: {activityById.data.attributes.toDate} 
            </li>
            <li>
              <span className="image-container">
                <Image layout="fill" alt="" className="image img-fluid" src="/images/availability/time.svg" />
              </span>
              Time: 9:45 AM - 10:00 AM
            </li>
            <li>
              <span className="image-container">
                <Image layout="fill" alt="" className="image img-fluid" src="/images/availability/duration.svg" />
              </span>
              Duration: 2-3 Hours
            </li>
            <li>
              <span className="image-container">
                <Image layout="fill" alt="" className="image img-fluid" src="/images/availability/contact.svg" />
              </span>
              Contact: 1(332) 204-8500
            </li>
            <li>
              <span className="image-container">
                <Image layout="fill" alt="" className="image img-fluid" src="/images/availability/date.svg" />
              </span>
              Date: All
            </li>
            <li>
              <span className="image-container">
                <Image layout="fill" alt="" className="image img-fluid" src="/images/availability/age.svg" />
              </span>
              Age: 13+
              <div className="info-div">
                <a className="image-container info" onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
                  <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/info.svg" />
                </a>
                {showInfo && <div className="info-text">13+. Climbers aged 13-17 must be accompanied by an adult (18+)</div>}
              </div>
            </li>
          </ul>
        </div>
      </div>
    </Fragment>
  );
};

export default DetailInfo;