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

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

import IcWarning from "../../../../../assets/icon/ic-warning.svg";
import IcLiveShow from "../../../../../assets/icon/tag/tag-liveshow.svg";
import VideoOverlayWithPhoneNumber from "../../../../components/VideoOverlayWithPhoneNumber/VideoOverlayWithPhoneNumber";
import { $L } from "../../../../utils/helperMethods";
import css from "./LiveVideoCard.module.less";

const SpottableComponent = Spottable("div");

const LIVE_SHOW_STRING = "Live Show";
const WARNING_STRING = "Warning";
const WARNING_MESSAGE =
  "This program was previously recorded. Offers, pricing, and availability may have changed.";

export default memo(function LiveVideoCard({
  endTime,
  liveChannelCount,
  onVideoCardBlur,
  onVideoCardClick,
  onVideoCardFocus,
  startTime,
  thumbnailSource,
  title,
  ...rest
}) {
  const [isFocused, setIsFocused] = useState(false);

  const handleBlur = useCallback(() => {
    setIsFocused(false);
    onVideoCardBlur && onVideoCardBlur();
  }, [onVideoCardBlur]);

  const handleClick = useCallback(() => {
    onVideoCardClick && onVideoCardClick();
  }, [onVideoCardClick]);

  const handleFocus = useCallback(() => {
    setIsFocused(true);
    onVideoCardFocus && onVideoCardFocus();
  }, [onVideoCardFocus]);

  return (
    <SpottableComponent
      className={css.container}
      {...rest}
      onBlur={handleBlur}
      onClick={handleClick}
      onFocus={handleFocus}
    >
      <img src={thumbnailSource} alt={title} />

      <div>
        <div>
          <img src={IcLiveShow} alt={$L(LIVE_SHOW_STRING)} />
          <div>
            <h3>{title}</h3>
            <time>
              {startTime} ~ {endTime}
            </time>
          </div>
        </div>

        {liveChannelCount && liveChannelCount === 1 && (
          // @@pyh, live 방송이라는 조건으로 변경
          <div>
            <img src={IcWarning} alt={$L(WARNING_STRING)} />
            <span>{$L(WARNING_MESSAGE)}</span>
          </div>
        )}
      </div>

      <VideoOverlayWithPhoneNumber
        className={css.callToOrder}
        show={isFocused}
      />
    </SpottableComponent>
  );
});
