import React, { useMemo } from "react";

import { useSelector } from "react-redux";

import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";

import defaultLogoImg from "../../../../assets/images/ic-tab-partners-default@3x.png";
import CustomImage from "../../../components/CustomImage/CustomImage";
import { $L, removeSpecificTags } from "../../../utils/helperMethods";
import ProductTag from "../components/ProductTag";
import StarRating from "../components/StarRating";
import css from "./ProductOption.module.less";

const Container = SpotlightContainerDecorator(
  { enterTo: "default-element" },
  "div"
);

export default function ProductOption({ children, productInfo }) {
  const { patncLogoPath, prdtId, prdtNm, revwGrd, expsPrdtNo } = productInfo;
  const productOptionId = useSelector((state) => state.product.prodOptCdCval);
  const productNameDangerousHTML = useMemo(() => {
    const sanitizedString = removeSpecificTags(prdtNm);

    return sanitizedString;
  }, [productInfo]);

  return (
    <Container
      className={css.optionContainer}
      spotlightId="spotlightId-productOptionContianer"
    >
      {productInfo && (
        <div className={css.contentHeader}>
          <div className={css.topLayer}>
            <CustomImage
              src={patncLogoPath && patncLogoPath}
              fallbackSrc={defaultLogoImg}
            />

            {(expsPrdtNo || productOptionId) && (
              <div aria-label={productInfo.patnrNm + ", ID :" + expsPrdtNo}>
                {$L("ID")} : {productOptionId ? productOptionId : expsPrdtNo}
              </div>
            )}
          </div>
          <div
            className={css.title}
            aria-label={prdtNm}
            dangerouslySetInnerHTML={{ __html: productNameDangerousHTML }}
          />

          <div className={css.bottomLayer}>
            <div>
              {revwGrd && (
                <StarRating
                  rating={revwGrd}
                  aria-label={"star rating " + revwGrd + " out of 5"}
                />
              )}
            </div>
            <ProductTag productInfo={productInfo} />
          </div>
        </div>
      )}
      {children}
    </Container>
  );
}
