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";
import { checkWishlist, toggleWishlist } from "../../redux/actions/activityAction.js";
import WishlistComponent from "./WIshlistComponent.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("endUser", endUser);
  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">
                    {endUser && <WishlistComponent activityId={activityById.data.id} userId={endUser.id} />}
                    <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
              </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>
      {/* {activityById && (
        <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>
      )} */}
      {activityById && (
        <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;