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

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

export default function TCFV_2({ className, data }) {
  useEffect(() => {
    if (data) {
      const showInfos = data[0].showInfos[0].showId;
      Spotlight.focus("spotlight" + showInfos);
    }
  }, [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={"spotlight" + showId}
                            >
                              <img
                                src={thumbnailUrl}
                                alt={showNm}
                                className={css.video}
                              />
                              {/* <video src={showUrl}></video> */}
                            </SpottableComponent>
                          );
                        }
                      )}

                  {productInfos &&
                    productInfos
                      .slice(0, 2)
                      .map(({ imgUrl, prdtNm, prdtId }) => {
                        return (
                          <SpottableComponent key={prdtId}>
                            <img src={imgUrl} alt={prdtNm} />
                          </SpottableComponent>
                        );
                      })}
                </Container>
              </div>
            );
          }
        )}
    </>
  );
}
