import React, { memo, useCallback, useMemo, useState } from "react";

import classNames from "classnames";

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

import defaultImageItem from "../../../../assets/images/img-thumb-empty-product@3x.png";
import CustomImage from "../../../components/CustomImage/CustomImage";
import TCheckBox from "../../../components/TCheckBox/TCheckBox";
import { $L, removeSpecificTags } from "../../../utils/helperMethods";
import css from "./MyPageItemCard.module.less";

const Container = SpotlightContainerDecorator({ enterTo: null }, "div");
const ItemContainer = Spottable("div");

export const SIZES = {
  itemWidth: 315,
  itemHeight: 265,
  spacing: 18,
};

export default memo(function MyPageItemCard({
  thumbnail,
  title,
  spotlightId,
  activeDelete,
  soldOutYn,
  selected,
  onToggle,
  onClick,
  onFocus,
  onFocusSpot,
  onBlur,
  onSpotlightUp,
  onSpotlightDown,
  index,
  length,
  dataWheelPoint,
}) {
  const [focus, setFocus] = useState(false);

  const _onClick = useCallback(
    (e) => {
      if (onClick) {
        onClick(e);
      }
    },
    [onClick]
  );

  const _onFocus = useCallback(() => {
    // setFocus(true);
    onFocus && onFocus();
  }, [onFocus]);
  const _onFocusSpot = useCallback(() => {
    onFocusSpot && onFocusSpot();
  }, [onFocusSpot]);
  const _onBlur = useCallback(() => {
    // setFocus(false);
    onBlur && onBlur();
  }, [onBlur]);

  const _onSpotlightUp = useCallback(() => {
    onSpotlightUp && onSpotlightUp();
  }, [onSpotlightUp]);

  const _onSpotlightDown = useCallback(() => {
    onSpotlightDown && onSpotlightDown();
  }, [onSpotlightDown]);
  const soldOutText = soldOutYn === "Y" ? "Sold Out," : "";
  const ariaLabel =
    soldOutText +
    title +
    (index * 1 + 1) +
    " of " +
    length +
    ", go to details, button";

  const productNameDangerousHTML = useMemo(() => {
    const sanitizedString = removeSpecificTags(title);

    return sanitizedString;
  }, [title]);
  return (
    <Container
      className={css.boxWrap}
      spotlightId={spotlightId}
      data-wheel-point={dataWheelPoint}
    >
      <ItemContainer
        className={css.itemContainer}
        spotlightId={spotlightId}
        spotlightDisabled={activeDelete}
        onClick={_onClick}
        onFocus={_onFocusSpot}
        onSpotlightUp={_onSpotlightUp}
        onSpotlightDown={_onSpotlightDown}
        aria-label={ariaLabel}
      >
        <div className={css.imgWrap}>
          {soldOutYn === "Y" && (
            <div className={css.soldOutOverlay}>
              <p className={css.soldOutText}>{$L("Sold Out")}</p>
            </div>
          )}
          <CustomImage
            alt={title}
            delay={0}
            animationSpeed="fast"
            src={thumbnail}
            fallbackSrc={defaultImageItem}
          />
        </div>
        <div className={css.titleWrap}>
          <p
            className={css.title}
            dangerouslySetInnerHTML={{ __html: productNameDangerousHTML }}
          />
        </div>
      </ItemContainer>

      {activeDelete && (
        <div
          className={classNames(css.checkboxOverlay, focus && css.focus)}
          onFocus={_onFocus}
          onBlur={_onBlur}
        >
          <TCheckBox
            className={css.checkbox}
            selected={selected}
            onToggle={onToggle}
          />
        </div>
      )}
    </Container>
  );
});
