// Generated with util/create-component.js
import React, { useEffect, useState } from "react";
import {
  getDiscountPercentage,
  isValidSpecValue,
  numberWithCommas,
} from "../../utils/functions";
import PickLabel from "../PickLabel";
import StarRating from "../StarRating";
import Timer from "../Timer";
import Heading from "../UI/Heading";
import Text from "../UI/Text";
import { StoreItemProps } from "./StoreItem.types";

const StoreItem = ({
  data: {
    index,
    id,
    goodsNo = "",
    goodsName,
    brandName,
    imageUrl,
    goodsPrice,
    fixedPrice = 0,
    periodDiscountStart = "",
    periodDiscountEnd = "",
    pickType = "none",
    benefitUseType = "",
    goodsAccess = "all",
    reviewAverage = 0,
    reviewCount = 0,
  },
  isLogin = false,
  showIndex = false,
  showBrand = true,
  showFixedPrice = true,
  showDiscountPercentage = true,
  showTimedealTimer = false,
  showRating = false,
  showPickBadge = true,
  pickBadgeType = "circle",
  pickBadgeOnImage = true,
  goodsNameStyle,
  priceStyle,
  imageSizeClassName,
  imageClassName,
  wrapperClassName = "",
  informationWrapperClassName = "",
  editingData,
  NextImage,
  isMobile = true,
}: StoreItemProps) => {
  const {
    isEditingMode = false,
    isSelected = false,
    onCheckChange: handleCheckChange,
  } = editingData ?? {};

  const [isChecked, setIsChecked] = useState<boolean>(isSelected);
  useEffect(() => {
    setIsChecked(isSelected);
  }, [isSelected]);

  return (
    <article
      data-testid="StoreItem"
      className={`nrc--StoreItem !h-auto ${wrapperClassName} `}
      onClick={() => {
        if (isEditingMode && handleCheckChange) {
          handleCheckChange(id as number);
        }
      }}
    >
      <div
        className={`relative overflow-hidden rounded-[10px] border-[1px] border-gray-2 ${imageSizeClassName} ${imageClassName}`}
        style={{ aspectRatio: "1/1" }}
      >
        {NextImage ? (
          <NextImage
            src={imageUrl}
            key={`nosearchPick_${brandName}_${goodsName}`}
            alt={`nosearchPick_${brandName}_${goodsName}`}
            layout="responsive"
            objectFit="contain"
            width={0}
            height={0}
            placeholder="blur"
            priority
          />
        ) : (
          <img
            src={imageUrl}
            alt={goodsName}
            className={`bg-white object-contain ${imageSizeClassName}`}
          />
        )}

        {pickBadgeOnImage && showPickBadge && pickBadgeType === "circle" && (
          <PickLabel
            type="circleLabel"
            pickType={pickType}
            labelStyle={`absolute top-[0.6rem] right-[0.6rem] ${
              isMobile ? "w-[4.5rem] h-[4.5rem]" : "w-[7.5rem] h-[7.5rem]"
            }`}
          />
        )}

        {pickBadgeOnImage && showPickBadge && pickBadgeType === "label" && (
          <PickLabel
            type="label"
            pickType={pickType}
            labelStyle="absolute top-[0.7rem] left-[0.7rem] px-[0.5rem] z-10"
          />
        )}

        {showIndex && index && (
          <div className="absolute top-0 left-0 flex h-[2.8rem] w-[2.8rem] items-center justify-center rounded-br-[10px] bg-gray-10">
            <Heading
              level={5}
              className="text-white"
              aria-label="인기상품 순위"
            >
              {index}
            </Heading>
          </div>
        )}

        {showTimedealTimer && (
          <Timer
            id={goodsNo + goodsName}
            type="timedeal"
            periodDiscountStart={periodDiscountStart}
            periodDiscountEnd={periodDiscountEnd}
            benefitUseType={benefitUseType}
          />
        )}

        {isEditingMode && (
          <>
            {isSelected && (
              <div
                className={`${imageSizeClassName} absolute top-0 left-0 bg-black opacity-40`}
              />
            )}
            <input
              type="checkbox"
              checked={isChecked}
              className="absolute bottom-[1rem] right-[1rem] "
            />
          </>
        )}
      </div>

      <div
        className={`${informationWrapperClassName} ${imageSizeClassName} !h-auto`}
      >
        {!pickBadgeOnImage && showPickBadge && pickBadgeType === "label" && (
          <PickLabel type="label" pickType={pickType} />
        )}

        <div className="my-[0.8rem]">
          {showBrand && isValidSpecValue(brandName) && (
            <Text
              type="D3"
              className={isMobile ? "text-gray-7" : "text-body-10"}
              aria-label="브랜드명"
            >
              {brandName}
            </Text>
          )}

          {isValidSpecValue(goodsName) && (
            <p
              className={`break-all text-gray-10 line-clamp-2 ${
                !goodsNameStyle
                  ? isMobile
                    ? "text-body-6 font-medium h-[4rem]"
                    : "font-medium text-body-4 h-[4.8rem]"
                  : goodsNameStyle
              }`}
              aria-label="상품명"
            >
              {goodsName}
            </p>
          )}
        </div>

        <div>
          {showFixedPrice && fixedPrice > goodsPrice && (
            <Text
              type="B10"
              className="text-gray-6 line-through"
              aria-label="정상가"
            >
              {numberWithCommas(fixedPrice)}원
            </Text>
          )}

          {!isLogin && goodsAccess === "member" ? (
            <Heading
              level={5}
              className={`text-secret ${
                isMobile ? "" : "text-heading-4 font-extrabold"
              }`}
              aria-label="회원전용 상품으로 가격 비공개"
            >
              회원전용 시크릿 특가
            </Heading>
          ) : (
            <div className="flex items-center space-x-[0.6rem]">
              {showDiscountPercentage && fixedPrice > goodsPrice && (
                <Heading
                  level={5}
                  className={`${isMobile ? "" : "text-heading-2"} ${
                    showTimedealTimer ? "text-red-4" : "text-blue-7"
                  }`}
                  aria-label="할인율"
                >
                  {typeof goodsPrice === "number" &&
                    `${getDiscountPercentage({ fixedPrice, goodsPrice })}%`}
                </Heading>
              )}

              <p
                className={`text-gray-10 pc:text-heading-4 ${
                  !priceStyle
                    ? isMobile
                      ? "text-heading-5 font-extrabold"
                      : "font-extrabold text-heading-4"
                    : priceStyle
                }`}
                aria-label="판매가"
              >
                {typeof goodsPrice === "number"
                  ? `${numberWithCommas(goodsPrice)}원`
                  : goodsPrice}
              </p>
            </div>
          )}

          {reviewAverage !== undefined &&
            reviewCount !== undefined &&
            reviewAverage > 0 &&
            reviewCount > 0 &&
            showRating && (
              <StarRating
                rating={reviewAverage}
                styleFor={{
                  size: 1.5,
                }}
                text={
                  <Text
                    type="B10"
                    className="ml-[0.8rem] flex items-center text-gray-7"
                  >
                    ({reviewCount})
                  </Text>
                }
              />
            )}
        </div>
      </div>
    </article>
  );
};

export default StoreItem;