import Image from "next/image";
import React, { Fragment, useEffect, useState } from "react";
import { Button } from "react-bootstrap";
import { fadeIn, zoomIn, slideFromLeft, slideFromRight } from "../animationvariants.js";
import { motion } from "framer-motion";
import { getSession } from "next-auth/react";
import { DatePicker } from "antd";
import { date } from "yup";
import { sendEnquiry } from "../../redux/actions/enquiryAction.js";
import { useDispatch, useSelector } from "react-redux";
import { toast } from "react-toastify";
import { getCurrentEndUser } from "../../redux/actions/userActions.js";

const DetailInfo = ({ activityById }) => {
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(getCurrentEndUser());
  }, []);

  // const [session, setSession] = useState(null);
  const [enqDate, setenqDate] = useState();
  const { loadedUser } = useSelector(state => state.loadedUser);
  const { endUser } = useSelector(state => state.endUser);
  // useEffect(() => {
  //   const fetchSession = async () => {
  //     setSession(await getSession());
  //   };
  //   fetchSession();
  //   // dispatch(getLoggedInVendor());
  // }, []);
  const [showInfo, setShowInfo] = useState(false);
  const [isToggled, setIsToggled] = useState(false);
  console.log("session", endUser);
  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
                onClick={async () => {
                  console.log("hello");
                  let res = await sendEnquiry({ activityId: activityById.data.id, userId: endUser.id, vendorId: activityById.data.attributes.vendor.data.id });
                  console.log("res", res);
                  toast.success("Enquiry sent successfully, our team will get back to you shortly! Thank you!");
                }}
                variant="primary me-3"
              >
                Enquire 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;