import React, { useCallback } from "react";

import SectionTitle from "../../../components/SectionTitle/SectionTitle";
import { $L } from "../../../utils/helperMethods";
import css from "./LiveChannels.module.less";
import LiveProductList from "./LiveProductList/LiveProductList";
import LiveVideoCard from "./LiveVideoCard/LiveVideoCard";

// getBrandLiveChannelInfo → brandChanInfo → brandProductInfo
// brandProductInfo = {
//  freeShippingFlag = null, // 무료배송 여부
//  offerInfo = "", // 제공 정보
//  prdtId,
//  prdtImgUrl,
//  prdtNm,
//  priceInfo, // 할인 전 금액, 할인 후(최종) 금액, 리워드여부, save금액, off(할인 %)
//  revwGrd = null, 리뷰 등급 (별점)
//  soldoutFlag,
// }

const LIVE_CHANNELS_STRING = "LIVE CHANNELS";

export default function LiveChannels({ brandChanInfo, brandChannelCnt }) {
  const {
    alamDispFlag, // UpComming 알람 여부
    brandProductInfo, // 상품 정보 Array
    chanId, // 채널 아이디
    chanNm, // 채널 이름
    endDt, // 방송 종료 시간
    liveYn, // 라이브 여부
    logoImgAlt, // 로고 이미지 alt 값
    logoImgNm, // 로고 이미지 이름
    logoImgPath, // 로고 이미지 경로
    patnrId, // 파트너 아이디
    prdtCnt, // 상품 개수
    showDesc, // 방송 설명
    showId, // 방송 아이디
    showNm, // 방송 이름
    showTimesec, // 방송 타임 (초)
    showUrl, // 방송 url
    strtDt, // 방송 시작 시간
    thumbnailImgPath,
    vtctpYn, // 영상 세로형 여부
  } = brandChanInfo;

  // @@pyh Todo, scenario page 100, thumbnail click → 영상 full 화면 이동 및 해당 상품 focuse
  const handleCardClick = useCallback((productId) => {}, []);

  return (
    <>
      {brandChannelCnt > 0 && (
        <div className={css.container}>
          <SectionTitle title={$L(LIVE_CHANNELS_STRING)} />

          {brandChannelCnt === 1 && (
            // @@pyh Todo, 오류 또는 장애 발생으로, Live방송이 나오지 않을 경우 처리 (Scenario, page 102)
            // 라이브 영상이 1개일 경우
            <div>
              <LiveVideoCard
                endTime={endDt}
                liveChannelCount={brandChannelCnt}
                startTime={strtDt}
                thumbnailSource={thumbnailImgPath}
                title={showNm}
              />

              {brandProductInfo && (
                <LiveProductList
                  brandProductInfo={brandProductInfo}
                  onCardClick={handleCardClick}
                />
              )}
            </div>
          )}

          {brandChannelCnt > 1 && (
            // @@pyh Todo, 영상이 2개 이상일 경우 UI/UX 작업 (harmony API 신청 후 작업)
            // 라이브 영상이 1개보다 많을 경우
            <div>
              {"brandChannelCnt(영상의 수)가 1보다 클 경우, type = vertical"}
            </div>
          )}
        </div>
      )}
    </>
  );
}
