import React, { useEffect, useState } from "react";

import StarRating from "../StarRating";
import ReactTooltip from "react-tooltip";

import watermelon from "./watermelon.png";
import video from "./danovin.mp4";

import discountImg from "./discount.png";

import heart from "./vuesax-linear-heart.svg";
import YellowDotIcon from "./yellowDotIcon.svg";
import RedDotIcon from "./redDotIcon.svg";
import PurpleDotIcon from "./purpleDotIcon.svg";
import LightBlueDotIcon from "./lightBlueDotIcon.svg";
import whitePlayIcon from "./white-play-button-icon.svg";

const VodProduct = ({
  productColor,
  colors,
  likeBtn,
  discount,
  discountPricePercent,
  discountPrice,
  productContent,
  star,
  productTags,
  priceDirection,
  productTitleAlignment,
  priceHolder,
  productCat,
  rangeHolder,
  priceTitle,
  addToCartHolder,
  productTitleCategoryHolder,
  productTitleCategoryHolderAlignment,
  priceStarHolder,
  priceStarAlignment,
  rangeWidth,
}) => {
  const [progressFlag, setProgressFlag] = useState(false);
  // const [openModal, setOpenModal] = useState(false);
  useEffect(() => {
    setTimeout(() => {
      setProgressFlag(true);
    }, 1000);
  });
  return (
    <section className="mx-auto p-0 sm:p-4 bg-white rounded-md shadow-md my-8">
      رویه باتن پلی / عکس کلیک کنید
      {/* product UI Design */}
      <div className="flex flex-wrap sm:flex-nowrap justify-around">
        <div className="w-full flex flex-wrap items-center justify-around my-10 px-1 sm:px-4">
          <div
            className={`w-full sm:w-60 md:w-96 mx-1 rounded-lg shadow-sm p-2 my-3 border border-grayBorderColor`}
          >
            {/* product image */}
            <div
              className="group transition ease-in-out delay-150 duration-300 w-full relative flex items-center justify-center cursor-pointer"
              style={{
                backgroundImage: `url(${watermelon})`,
                backgroundSize: "100% 100%",
                backgroundRepeat: "no-repeat",
                minHeight: "180px",
              }}
              data-modal-toggle="large-modal"
            >
              {/* icons on image */}
              <div className="absolute left-2 top-2">
                {discountPricePercent && (
                  <div className="bg-discountPriceBg rounded-md px-2 py-2 mt-2 transition ease-in-out duration-300 transform hover:-translate-y-1 hover:scale-110 cursor-pointer">
                    <p className="text-discountPriceTitle font-bold text-xs">
                      23<span>%</span>
                    </p>
                  </div>
                )}
                {likeBtn && (
                  <div className="bg-likeBtnBg rounded-md p-1 flex justify-center mt-2 transition ease-in-out duration-300 transform hover:-translate-y-1 hover:scale-110 cursor-pointer">
                    <img src={heart} alt="" className="w-5" />
                  </div>
                )}
                {discount && (
                  <div className="rounded-md mt-2 transition ease-in-out duration-300 transform hover:-translate-y-1 hover:scale-110 cursor-pointer">
                    <img src={discountImg} alt="" className="w-full" />
                  </div>
                )}
              </div>
              {/* play button */}
              <div
                className={` rounded-full p-4 group-hover:scale-125 transform transition-transform duration-300 bg-playButtonIcon`}
                // onClick={() => setOpenModal(true)}
              >
                <img
                  src={whitePlayIcon}
                  alt=""
                  className="w-5 h-5"
                  // onClick={() => setOpenModal(true)}
                />
              </div>
              {/* select Color */}
              {productColor && (
                <div className="flex items-center absolute right-2 bottom-2">
                  {/* {colors.map((color,index))} */}
                  <img
                    src={YellowDotIcon}
                    alt=""
                    data-tip="زرد"
                    className="w-3 h-3 ml-1 cursor-pointer"
                  />
                  <ReactTooltip place="top" type="dark" effect="float" />
                </div>
              )}
            </div>
            {/* product content */}
            <div className="px-2">
              {/* content */}
              <div className="mt-4 flex flex-col">
                <div
                  className={`flex ${productTitleCategoryHolder} ${productTitleCategoryHolderAlignment} justify-between `}
                >
                  <h2
                    className={`leading-4 text-base mb-2 font-semibold text-darkCrimsonTextColor ${productTitleAlignment}`}
                  >
                    نسخه چاپی علموم تجربه هفتم
                  </h2>
                  {productCat && (
                    <span
                      className={`text-xs font-light text-darkCrimsonTextColor`}
                    >
                      پایه سوم
                    </span>
                  )}
                </div>
                {productContent && (
                  <p
                    className={`text-justify text-sm leading-6 text-productContent`}
                  >
                    این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های
                    خوب دیگری نیز دارد.
                  </p>
                )}
              </div>
              {/* price */}
              <div
                className={`flex ${priceStarHolder} ${priceStarAlignment}  justify-between mt-2`}
              >
                {priceHolder && (
                  <div
                    className={`flex items-center justify-between ${priceDirection}`}
                  >
                    {/* price */}
                    <div className="">
                      <div
                        className={`${
                          priceDirection.indexOf("col") !== -1
                            ? "inline"
                            : "flex"
                        }`}
                      >
                        {priceTitle && (
                          <span className="text-xs text-borderColor ml-2">
                            قیمت
                          </span>
                        )}
                        {discountPrice && (
                          <p className="line-through text-xs text-borderColor">
                            <span> قیمت</span> 140<span>تومان</span>
                          </p>
                        )}
                      </div>
                      <p
                        className={`text-sm font-semibold inline text-productPrice`}
                      >
                        111.000<span>تومان</span>
                      </p>
                    </div>
                    {/* add to cart */}
                    {addToCartHolder && (
                      <button
                        className={`rounded-md px-2 py-3 border text-xs text-productPrice mt-2 hover:bg-darkCrimsonBgColor hover:text-white active:bg-rangeFillBgColor transition duration-500  ${
                          priceDirection.indexOf("col") !== -1 ? "w-full" : ""
                        }`}
                      >
                        اضافه کردن به سبد خرید
                      </button>
                    )}
                  </div>
                )}
                {star && (
                  <div className="flex items-center">
                    <StarRating />
                    <span className="text-xs text-productContent font-bold mr-2">
                      39
                    </span>
                  </div>
                )}
              </div>
              {productTags && (
                <div className="mt-2 flex flex-wrap">
                  <button className="rounded bg-productTagBg text-productTag m-1 px-4 py-1 text-xs">
                    ارسال رایگان
                  </button>
                  <button className="rounded bg-productTagBg text-productTag m-1 px-4 py-1 text-xs">
                    برچسب های دیگر
                  </button>
                  <button className="rounded bg-productTagBg text-productTag m-1 px-4 py-1 text-xs">
                    دسته بندی به صورت کادو
                  </button>
                </div>
              )}
              {rangeHolder && (
                <div className="bg-rangeBgColor h-3 w-full rounded mt-2">
                  <div
                    className={`bg-rangeFillBgColor h-3 rounded duration-500`}
                    style={{
                      width: progressFlag ? rangeWidth : 0,
                    }}
                  ></div>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
      <div
        class="hidden overflow-y-auto overflow-x-hidden fixed right-0 left-0 top-4 z-50 justify-center items-center md:inset-0 h-modal sm:h-full"
        id="large-modal"
      >
        <div class="relative px-4 w-full max-w-4xl h-full md:h-auto">
          <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
            <div class="flex justify-between items-center p-5 rounded-t border-b border-gray-200 dark:border-gray-600">
              <button
                type="button"
                class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
                data-modal-toggle="large-modal"
              >
                <svg
                  class="w-5 h-5"
                  fill="currentColor"
                  viewBox="0 0 20 20"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    fill-rule="evenodd"
                    d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                    clip-rule="evenodd"
                  ></path>
                </svg>
              </button>
            </div>
            <div class="p-6 space-y-6">
              <video
                controls
                className={`border transition-all duration-1000
          `}
                src={video}
                type="video/mp4"
              ></video>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};
// hover:-translate-y-2
export default VodProduct;

// text colors i used for product title:
// text-darkCrimsonTextColor
// text-productTitle

// text color i used for product excerpt:
// text-productContent

// text color i used for product cat:
// text-darkCrimsonTextColor

// bg color i used for play button icon:
// bg-playButtonIcon
// bg-playButtonIcon2

VodProduct.defaultProps = {
  colors: [
    {
      icon: YellowDotIcon,
      dataType: "زرد",
    },
    {
      icon: RedDotIcon,
      dataType: "قرمز",
    },
    {
      icon: PurpleDotIcon,
      dataType: "بنفش",
    },
    {
      icon: LightBlueDotIcon,
      dataType: "آبی",
    },

    LightBlueDotIcon,
  ],

  // icons on product image
  productColor: true,
  likeBtn: true,
  discount: true,
  discountPricePercent: true,
  // product price
  discountPrice: true,
  priceHolder: true,
  priceTitle: false,

  productContent: false,
  star: true,
  productTags: false,
  productCat: true,
  rangeHolder: true,

  addToCartHolder: false,

  productTitleAlignment: "text-justify",

  // برای درصد دادن به عرض رنج
  rangeWidth: "75%",

  priceDirection: "flex-row",

  productTitleCategoryHolder: "flex-row",
  productTitleCategoryHolderAlignment: "items-center",

  // برای اینکه بتونیم ستاره هارو بالا قیمت بزاریم و دیزاین را مثل کتاب ها در بیاریم
  // یادمون باشه که حتما رویه
  // flex-col-reverse
  // بزاریم

  // دیفالتش باید این باشه:
  // priceStarHolder: flex-row
  priceStarHolder: "flex-row",
  // دیفالتش باید این باشه:
  // priceStarHolder: items-center
  priceStarAlignment: "items-center",
};