import React, { useEffect } from 'react';

import classNames from 'classnames';

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

import css from './TCFV_3.module.less';

const SpottableComponent = Spottable("li");
const SpottableComponentDiv = Spottable("div");
const Container = SpotlightContainerDecorator(
  { enterTo: "last-focused", preserveId: true },
  "ul"
);
const ContainerDiv = SpotlightContainerDecorator(
  { enterTo: "last-focused", preserveId: true },
  "div"
);
export default function TCFV_3({ className, data }) {
  useEffect(() => {
    Spotlight.focus("spotData");
  }, [data]);
  return (
    <>
      {data &&
        data.map(
          ({ bgImgPath, curationNm, tmpltCd, productInfos, showInfos }) => {
            return (
              <div
                key={tmpltCd}
                className={classNames(className && className, css.flexCont)}
              >
                <ContainerDiv className={css.fullImg}>
                  {showInfos &&
                    showInfos
                      .slice(0, 1)
                      .map(
                        ({
                          dfltThumbnailImgPath,
                          showId,
                          showNm,
                          showUrl,
                          thumbnailUrl,
                        }) => {
                          // @@@ 영상 출력 처리
                          return (
                            <SpottableComponentDiv
                              key={showId}
                              spotlightId="spotData"
                            >
                              <img
                                src={thumbnailUrl}
                                alt={showNm}
                                className={css.video}
                              />
                              {/* <video src={showUrl}></video> */}
                            </SpottableComponentDiv>
                          );
                        }
                      )}
                </ContainerDiv>
                <Container className={css.itemList}>
                  {productInfos &&
                    productInfos
                      .slice(0, 4)
                      .map(({ imgUrl, prdtNm, prdtId }) => {
                        return (
                          <SpottableComponent key={prdtId}>
                            <img src={imgUrl} alt={prdtNm} />
                          </SpottableComponent>
                        );
                      })}
                </Container>
              </div>
            );
          }
        )}
    </>
  );
}
