import React, { useState } from "react";
import { Link } from "react-router-dom";
import { connect } from "react-redux";
import separate from "../../utils/separate";
import StarRating from "../StarRating";


import book from "./goldon.png";
import heart from "./vuesax-linear-heart.svg";
import discountImg from "./discount.png";

const ProductDesign = ({
  grades,
  likeBtn,
  discount,
  discountPricePercent,
  discountPrice,
  productContent,
  star,
  product,
  priceDirection,
  priceHolder,
  productExcerptTextColor,
  productCat,
  rangeHolder,
  rangeWidth,
  addToCartHolder,
  writeGHEIMAT,
  hoverMode,
  starRate,
  imageSize,
  type
}) => {
  const [isHovering, setIsHovering] = useState(false);
  return (
    <Link
      to={"/products/" + product.id}
      className={`flex flex-wrap sm:flex-nowrap justify-around transition-all group`}
      style={{ direction: "rtl" }}
    >
      <div className="w-full flex flex-wrap items-center justify-around ">
        <div
          className={`w-full sm:w-60 md:w-72 rounded-lg p-2 my-3 transform hover:-translate-y-5 transition-all duration-500 border border-solid border-gray-200 hover:border-greenB9 hover:border-2`}
          onMouseEnter={() => setIsHovering(true)}
          onMouseLeave={() => setIsHovering(false)}
        >
          {/* product image */}
          <div className="w-full relative">
            {/* icons on image */}
            <div className="w-full absolute left-0 top-10">
              {discountPricePercent && (
                <div className="w-full bg-white p-2 px-3">
                  <p className="text-discountPriceTitle font-bold text-md text-blueC0">
                    23<span>%</span>
                  </p>
                </div>
              )}
              {likeBtn && (
                <div className="bg-likeBtnBg rounded-md flex justify-center my-2">
                  <img src={heart} alt="" className="w-5" />
                </div>
              )}
              {discount && (
                <div className="rounded-md">
                  <img src={discountImg} alt="" className="w-full" />
                </div>
              )}
            </div>
            {/* img */}
            <div
              className={`w-full flex bg-greenD8 p-0 justify-center rounded-lg group`}
            >
              <img
                src={`https://dnvn.ir/api/v1/file/${product?.fileIds}`}
                alt=""
                style={{
                  height: `calc(100vh / ${imageSize})`,
                  width: `calc(100vh / ${imageSize} * 2 / 3.5)`,
                }}
                className="rounded-lg cursor-pointer py-5"
              />
            </div>
          </div>
          {/* product content */}
          <div className="w-full px-2">
            <div className="w-full mt-4 font-semibold text-base">
              <h2
                className={`leading-5 text-tiny font-normal py-2 text-right text-blue5F`}
              >
                {product?.product[type]?.name}
              </h2>
              {productContent && (
                <p
                  className={`text-justify mt-2 text-xs leading-6 ${productExcerptTextColor}`}
                >
                  این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های خوب
                  دیگری نیز دارد.
                </p>
              )}
              {productCat && (
                <span className={`text-sm py-1 font-normal text-blueC0`}>
                  {"پایه" + " " + grades[product?.gradeId]}
                </span>
              )}
            </div>
            {/* star */}
            {star && (
              <div className="flex items-center mt-3">
                <StarRating value={starRate || 4} />
                {/* <span className="text-xs text-productContent font-bold text-gray-500 mr-2">
                  بر اساس {numberOfRegards} بررسی
                </span> */}
              </div>
            )}
            {/* price */}
            {priceHolder && (
              <div className={`flex items-center justify-between mt-2`}>
                <div className="mt-2">
                  <div
                    className={`${
                      priceDirection.indexOf("col") !== -1 ? "inline" : "flex"
                    }`}
                  >
                    {writeGHEIMAT && (
                      <span className="text-xs text-borderColor ml-2">
                        قیمت
                      </span>
                    )}
                    {/* price with line on it */}
                    {discountPrice && (
                      <p className="line-through text-xs text-borderColor mr-2">
                        145<span>تومان</span>
                      </p>
                    )}
                  </div>
                  <p className="text-lg text-productPrice font-semibold inline text-green4F">
                    {separate(product.product[type]?.price)} <span>تومان</span>
                  </p>
                </div>
                {/* add to cart */}
                {addToCartHolder && (
                  <button
                    className={`rounded-2xl px-2 py-3 border text-xs text-productPrice mt-2 hover:bg-darkCrimsonBgColor hover:text-white active:bg-rangeFillBgColor transition duration-500 hover:-translate-y-2 ${
                      priceDirection.indexOf("col") !== -1 ? "w-full" : ""
                    }`}
                  >
                    اضافه کردن به سبد خرید
                  </button>
                )}
              </div>
            )}

            {hoverMode == "blue" ? (
              <div className="w-full flex justify-center mt-4">
                <div
                  className={`bg-blueC0 text-white rounded p-4 text-xs justify-center ${
                    isHovering ? "" : "hidden"
                  }`}
                >
                  <button>افزودن به سبد خرید</button>
                </div>
              </div>
            ) : null}

            {/* {productTags && (
              <div className="mt-2 flex flex-wrap">
                {
                  productTags.map((item, index) => <Tag title={item} key={index} />)
                }
              </div>
            )} */}
            {rangeHolder && (
              <div className="bg-rangeBgColor h-3 w-full rounded mt-2">
                <div
                  className={`bg-rangeFillBgColor h-3 rounded ${rangeWidth}`}
                ></div>
              </div>
            )}
          </div>
        </div>
      </div>
    </Link>
  );
};

const mapStateToProps = (state) => ({
  grades: state.publicApi.grades,
});

export default connect(mapStateToProps)(ProductDesign);

ProductDesign.defaultProps = {
  // icons on product image
  type : 0,
  colors: false,
  likeBtn: false,
  discount: false,
  discountPricePercent: false,
  // product price
  discountPrice: false,
  priceHolder: true,

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

  // دو مدل عکس طراحی کردم که یکی عرض بیشتری دارد یکی ارتفاع
  verticalImg: true,
  horizontalImg: false,

  addToCartHolder: false,

  productTitleColor: "text-productTitle",

  productExcerptTextColor: "text-productContent",

  productCatTextColor: "text-darkCrimsonTextColor",
  // برای درصد دادن به عرض رنج
  rangeWidth: "w-44",
  //دی ای وی که محصول داخلش است میتونیم بهش بوردر بدیم
  productHolderBorder: "border",
  productHolderBorderColor: "border-grayBorderColor",

  productTitleAlignment: "text-justify",
  //میتونیم تعیین کنیم که قیمت و دکمه اضاف به سبد خرید کنار یکدیگر باشند یا زیر هم
  priceDirection: "flex-row",
  productImg: book,
  writeGHEIMAT: false,
};