import Image from "next/image";
import React, { Fragment, useEffect, useState } from "react";
import { Button, Modal } from "react-bootstrap";
import { fadeIn, zoomIn, slideFromLeft, slideFromRight } from "../animationvariants.js";
import { motion } from "framer-motion";
import { getSession } from "next-auth/react";
import { DatePicker, Input } 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";
import { Loader } from "react-bootstrap-typeahead";
import { useRouter } from "next/router.js";
import Link from "next/link.js";

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

  // const [session, setSession] = useState(null);
  const [enqDate, setenqDate] = useState();
  const [loading, setloading] = useState(false);
  const [quantity, setquantity] = useState();
  const [loginModal, setloginModal] = useState(false);
  const [enquiryModal, setenquiryModal] = useState(false);
  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">
        {activityById && (
          <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
                  disabled={loading}
                  onClick={() => {
                    if (!endUser) {
                      setloginModal(true);
                    } else {
                      setenquiryModal(true);
                    }
                  }}
                  variant="primary me-3"
                >
                  {loading ? <Loader /> : "Enquire Now"}
                </Button>
                <Button
                  onClick={() => {
                    if (!endUser) {
                      setloginModal(true);
                    } else {
                      router.push("/gift-card");
                    }
                  }}
                  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>
      <Modal
        show={enquiryModal}
        onHide={() => {
          setenquiryModal(false);
          setquantity();
        }}
      >
        <Modal.Header>Send Enquiry</Modal.Header>
        <Modal.Body>
          <div>Experience Name:</div>
          <div className="" style={{ fontSize: "22px", fontWeight: "bold" }}>
            {activityById.data.attributes.name}
          </div>
          <div className="mt-2">Full Name:</div>
          <div className="" style={{ fontWeight: "bold" }}>
            {endUser?.attributes.name}
          </div>
          <div className="mt-2">Email ID:</div>
          <div className="" style={{ fontSize: "22px", fontWeight: "bold" }}>
            {endUser?.attributes.email}
          </div>
          <div className="mt-2">Quantity:</div>
          <Input
            type="number"
            onChange={e => {
              // console.log("e", e);
              setquantity(e.target.value);
            }}
          ></Input>
          <Button
            disabled={loading || !quantity}
            className="mt-2"
            onClick={async () => {
              setloading(true);
              console.log("hello");
              let res = await sendEnquiry({ activityId: activityById.data.id, userId: endUser.id, vendorId: activityById.data.attributes.vendor.data.id, quantity });
              console.log("res", res);
              toast.success("Enquiry sent successfully, our team will get back to you shortly! Thank you!");
              setloading(false);
              setenquiryModal(false);
              setquantity();
            }}
          >
            {loading ? <Loader /> : "Submit"}
          </Button>
        </Modal.Body>
      </Modal>
      <Modal
        show={loginModal}
        centered
        onHide={() => {
          setloginModal(false);
        }}
      >
        <Modal.Header closeButton>Please Log in</Modal.Header>
        <Modal.Body>
          <div className="text-center d-flex justify-content-center row">
            <div className="col-12 m-2">Please login to avail this feature.</div>
            <Button
              className="col-6 m-2"
              onClick={() => {
                router.push("/login/user");
              }}
            >
              Login
            </Button>
            <Link className="m-2" href={"/signup/user"}>
              Or click here to sign up.
            </Link>
          </div>
        </Modal.Body>
      </Modal>
    </Fragment>
  );
};

export default DetailInfo;