import React, { useState, useEffect, useRef } from "react";
import { $L } from "../utils/helperMethods";
import OptionalTermsInfo from "../views/MyPagePanel/MyPageSub/TermsOfService/OptionalTermsInfo";
import css from "../views/IntroPanel/IntroPanel.new.module.less";

const getPanelContent = (
  focusedItem,
  termsChecked,
  privacyChecked,
  shouldShowBenefitsView
) => {
  const requiredItemIds = [
    "termsCheckbox",
    "termsButton",
    "privacyCheckbox",
    "privacyButton",
  ];
  const isRequiredFocused = requiredItemIds.includes(focusedItem);

  // 1순위: 포커스가 필수 약관 관련 아이템에 있는 경우
  if (isRequiredFocused) {
    // 필수 약관이 동의되지 않았을 때 (경고 메시지 포함)
    if (!termsChecked || !privacyChecked) {
      return (
        <div className={css.requiredInfoPanel}>
          <p className={css.infoText}>{$L("Required Consent")}</p>
          <p className={css.infoText}>
            {$L("(Necessary for using the service)")}
          </p>
          <div className={css.warningContainer}>
            <p className={css.warningText}>
              {$L("Please agree to the required Terms & Conditions and")}
            </p>
            <p className={css.warningText}>
              {$L("Privacy Policy to start enjoying Shop Time")}
            </p>
          </div>
        </div>
      );
    }
    // 필수 약관이 모두 동의되었을 때 (단순 안내 메시지)
    return (
      <div className={css.requiredInfoPanel}>
        <p className={css.infoText}>{$L("Required Consent")}</p>
        <p className={css.infoText}>
          {$L("(Necessary for using the service)")}
        </p>
      </div>
    );
  }

  // 2순위: 포커스가 그 외 모든 아이템에 있는 경우
  return (
    <>
      {shouldShowBenefitsView ? (
        <div className={css.optionalDescription}>
          {$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'
          )}
        </div>
      ) : (
        <OptionalTermsInfo
          displayMode="image"
          imageTitle={$L("Agree and Enjoy Special Benefits")}
          spotlightId="optional-terms-info"
        />
      )}
    </>
  );
};

const useRightPanelContent = (
  focusedItem,
  termsChecked,
  privacyChecked,
  shouldShowBenefitsView
) => {
  const [content, setContent] = useState(() =>
    getPanelContent(
      focusedItem,
      termsChecked,
      privacyChecked,
      shouldShowBenefitsView
    )
  );
  const updateTimeoutRef = useRef(null);

  useEffect(() => {
    if (updateTimeoutRef.current) {
      clearTimeout(updateTimeoutRef.current);
    }

    updateTimeoutRef.current = setTimeout(() => {
      const newContent = getPanelContent(
        focusedItem,
        termsChecked,
        privacyChecked,
        shouldShowBenefitsView
      );
      setContent(newContent);
    }, 50);

    return () => {
      if (updateTimeoutRef.current) {
        clearTimeout(updateTimeoutRef.current);
      }
    };
  }, [focusedItem, termsChecked, privacyChecked, shouldShowBenefitsView]);

  return content;
};

export default useRightPanelContent; 