import React from 'react';

import Spotlight from '@enact/spotlight';
import Spottable from '@enact/spotlight/Spottable';

import { SpotlightIds } from '../../../../utils/SpotlightIds';
import css from './ShopNowButton.module.less';

const SpottableDiv = Spottable('div');

export default function ShopNowButton({ onClick }) {
  const handleSpotlightUp = (e) => {
    e.stopPropagation();
    e.preventDefault();
    // tabIndexV2가 2일 때만 Back 버튼으로 포커스
    // 이 속성은 부모 컴포넌트에서 props로 받아야 하지만, 일단 Back 버튼으로 직접 이동
    Spotlight.focus(SpotlightIds.PLAYER_BACK_BUTTON);
  };

  const handleSpotlightDown = (e) => {
    e.stopPropagation();
    e.preventDefault();
    // tabIndexV2가 2일 때만 CC 버튼으로 내려가기
    Spotlight.focus('live-channel-next-button');    
  };

  const handleSpotlightLeft = (e) => {
    e.stopPropagation();
    e.preventDefault();
    // tabIndexV2가 2일 때만 CC 버튼으로 내려가기
    Spotlight.focus('player-subtitlebutton');    
  };

  return (
    <div className={css.container}>
      <SpottableDiv
        className={css.shopNowButton}
        onClick={onClick}
        spotlightId="below-tab-shop-now-button"
        onSpotlightUp={handleSpotlightUp}
        onSpotlightDown={handleSpotlightDown}
        onSpotlightLeft={handleSpotlightLeft}
      >
        <span className={css.buttonText}>SHOP NOW</span>
      </SpottableDiv>
    </div>
  );
}