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_4.module.less';

const Container = SpotlightContainerDecorator(
  { enterTo: "last-focused", preserveId: true },
  "ul"
);

const SpottableComponent = Spottable("li");

export default function TCFV_4({ className, data }) {
  useEffect(() => {
    if (data) {
      Spotlight.focus("spotData");
    }
  }, [data]);
  return (
    <>
      {data &&
        data.map(
          ({ bgImgPath, curationNm, tmpltCd, productInfos, showInfos }) => {
            return (
              <div key={tmpltCd} className={classNames(className && className)}>
                <div className={css.fullImg}>
                  <img src={bgImgPath} alt={curationNm} />
                </div>
                <Container className={css.itemList}>
                  {/* {showInfos &&
                    showInfos
                      .slice(0, 1)
                      .map(
                        ({
                          dfltThumbnailImgPath,
                          showId,
                          showNm,
                          showUrl,
                          thumbnailUrl,
                        }) => {
                          // @@@ 영상 출력 처리
                          return (
                            <SpottableComponent
                              key={showId}
                              spotlightId="spotData"
                            >
                              <img
                                src={bgImgPath}
                                alt={curationNm}
                                className={css.video}
                              />
                              
                            </SpottableComponent>
                          );
                        }
                      )}
                       */}
                  <SpottableComponent spotlightId="spotData">
                    <img
                      src={bgImgPath}
                      alt={curationNm}
                      className={css.video}
                    />
                  </SpottableComponent>
                  {productInfos &&
                    productInfos
                      .slice(0, 4)
                      .map(({ imgUrl, prdtNm, prdtId }) => {
                        return (
                          <SpottableComponent key={prdtId}>
                            <img src={imgUrl} alt={prdtNm} />
                          </SpottableComponent>
                        );
                      })}
                </Container>
              </div>
            );
          }
        )}
    </>
  );
}
