// src/views/MyPagePanel/MyPageSub/TermsOfService/OptionalTermsInfo.jsx

import React, { memo } from "react";
import kind from "@enact/core/kind";
import PropTypes from "prop-types";
import { $L } from "../../../../utils/helperMethods";

import css from "./OptionalTermsInfo.module.less";
import benefitImage from "/assets/images/benefits/image-benefits.png";

/**
 * OptionalTermsInfo 컴포넌트
 * WebOS 버전에 따라 텍스트 또는 이미지로 선택적 약관 정보를 표시합니다.
 */
const OptionalTermsInfo = kind({
  name: "OptionalTermsInfo",

  propTypes: {
    /**
     * 추가 CSS 클래스명
     */
    className: PropTypes.string,

    /**
     * 표시 모드 - 텍스트 또는 이미지
     * @type {('text'|'image')}
     */
    displayMode: PropTypes.oneOf(["text", "image"]),

    /**
     * 이미지 모드일 때 사용할 이미지 소스들 (배열)
     */
    imageSources: PropTypes.arrayOf(PropTypes.string),

    /**
     * 이미지 모드일 때 표시할 제목
     */
    imageTitle: PropTypes.string,

    /**
     * 텍스트 모드일 때 표시할 설명 텍스트
     */
    textDescription: PropTypes.string,

    /**
     * Spotlight ID
     */
    spotlightId: PropTypes.string,
  },

  defaultProps: {
    displayMode: "text",
    imageSources: [benefitImage],
    imageTitle: $L("Agree and Enjoy Special Benefits"),
    textDescription: $L(
      "By checking Optional terms, you allow Shop Time to use your activity (views, purchases, searches, etc.) to show you more relevant content, product recommendations, special offers, and ads. If you do not check, you can still use all basic Shop Time features"
    ),
  },

  styles: {
    css,
    className: "termsInfo",
  },

  computed: {
    className: ({ className, styler }) => styler.append(className),
  },

  render: ({
    displayMode,
    imageSources,
    imageTitle,
    textDescription,
    spotlightId,
    ...rest
  }) => {
    const imageCount = imageSources ? imageSources.length : 0;

    return (
      <div {...rest} data-spotlight-id={spotlightId}>
        {displayMode === "text" ? (
          // 텍스트 모드
          <div className={css.textMode}>
            <p className={css.textDescription}>{textDescription}</p>
          </div>
        ) : (
          // 이미지 모드
          <div className={css.imageMode}>
            <div
              className={`${css.imageContainer} ${css[`imageCount${imageCount}`]}`}
            >
              {imageSources &&
                imageSources.map((src, index) => (
                  <img
                    key={index}
                    className={css.benefitImage}
                    src={src}
                    alt={$L(`Benefit image ${index + 1}`)}
                  />
                ))}
            </div>
          </div>
        )}
      </div>
    );
  },
});

export default memo(OptionalTermsInfo);
export { OptionalTermsInfo };
