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";
import ShareWidget from "./ShareWidget.js";
import { sanitizeTimeRange } from "../../services/imageHandling";

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

  const calculateRating = data => {
    let value = 0;
    data.map(item => {
      // console.log("item", item);
      value = value + item.attributes.rating;
    });
    // console.log("value", value);
    let length = data.length;
    return Math.floor(value / length);
  };

  const [session, setSession] = useState(null);
  const [enqDate, setenqDate] = useState();
  const [loading, setloading] = useState(false);
  const [quantity, setquantity] = useState();
  const [enquireDate, setenquireDate] = useState();
  const [loginModal, setloginModal] = useState(false);
  const [enquiryModal, setenquiryModal] = useState(false);
  const [showshareWidget, setshowshareWidget] = 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"></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
                          onClick={() => {
                            setshowshareWidget(true);
                          }}
                          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">
                {activityById.data.attributes.reviews.data && activityById.data.attributes.reviews.data.length > 0 && (
                  <div className="rating">
                    <span className="number">{calculateRating(activityById.data.attributes.reviews.data)}</span>
                    <span className="image-container">
                      <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" />
                      {/* {calculateRating(activityById.data.attributes.reviews.data)} */}
                    </span>
                  </div>
                )}
                <span className="review">{activityById.data.attributes.reviews.data.length > 0 ? activityById.data.attributes.reviews.data.length : 0} Review(s)</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="my-3">{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>
                {activityById.data.attributes.link && (
                  <Button
                    disabled={loading}
                    onClick={() => {
                      window.open(activityById.data.attributes.link, "_blank", "noopener,noreferrer");
                    }}
                    variant="primary"
                  >
                    Book Now
                  </Button>
                )}
              </div>
              <div className="mb-1">
                <Button
                  onClick={() => {
                    if (!endUser) {
                      setloginModal(true);
                    } else {
                      router.push("/gift-card");
                    }
                  }}
                  variant="secondary me-3"
                >
                  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>

      <Modal
        centered
        show={showshareWidget}
        onHide={() => {
          setshowshareWidget(false);
        }}
      >
        <Modal.Header closeButton>Share on social media</Modal.Header>
        <Modal.Body>
          <ShareWidget />
        </Modal.Body>
      </Modal>
      {activityById && (
        <Modal
          centered
          show={enquiryModal}
          onHide={() => {
            setenquiryModal(false);
            setquantity();
            setenquiryModal;
          }}
        >
          <Modal.Header>
            <h4>Send Enquiry</h4>
          </Modal.Header>
          <Modal.Body>
            <div>Experience Name:</div>
            <div className="" style={{ fontSize: "22px", fontWeight: "bold" }}>
              {activityById.data.attributes.name}
            </div>
            <div className="mt-3">Full Name:</div>
            <div className="" style={{ fontWeight: "bold" }}>
              {endUser?.attributes.name}
            </div>
            <div className="mt-3">Email ID:</div>
            <div className="" style={{ fontSize: "22px", fontWeight: "bold" }}>
              {endUser?.attributes.email}
            </div>
            <div className="row d-flex justify-content-center">
              <div className="col-6">
                <div className="mt-2">Quantity:</div>
                <Input
                  type="number"
                  onChange={e => {
                    // console.log("e", e);
                    setquantity(e.target.value);
                  }}
                ></Input>
              </div>
              <div className="col-6">
                <div className="mt-2">Date:</div>

                <div className="">
                  <DatePicker
                    popupStyle={{
                      position: "fixed",
                      zIndex: 9999
                    }}
                    onChange={e => {
                      console.log(sanitizeTimeRange({ data: e }));
                      // e.preventDefault();
                      // console.log(e);
                      setenquireDate(sanitizeTimeRange({ data: e }));
                    }}
                  />
                </div>
              </div>
            </div>
            <Button
              disabled={loading || !quantity}
              className="mt-2 col-12"
              onClick={async () => {
                setloading(true);
                console.log("hello");
                if (!enquireDate) toast.error("Please select date!")
                if (!quantity) toast.error("Please select quantity!")
                let res = await sendEnquiry({ activityId: activityById.data.id, userId: endUser.id, vendorId: activityById.data.attributes.vendor.data.id, quantity, date: enquireDate });
                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;