import React, {
  useCallback,
  useEffect,
  useState,
  useMemo,
  useRef,
} from "react";
import classNames from "classnames";

import { Job } from "@enact/core/util";
import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator";
import { shallowEqual, useDispatch, useSelector } from "react-redux";
import Spotlight from "@enact/spotlight";
import Marquee from "@enact/sandstone/Marquee";
import Spottable from "@enact/spotlight/Spottable";

import CustomImage from "../../../components/CustomImage/CustomImage";
import ViedoPlayer from "@enact/sandstone/VideoPlayer";
import css from "./Template.module.less";
import { getAdDetailAMD, getHomeTerms } from "../../../api/homeApi";

import banner2 from "../../../../assets/Image/img-home-banner-h-02.png";
import banner3 from "../../../../assets/Image/img-home-banner-v-01.png";
import banner4 from "../../../../assets/Image/img-home-banner-v-02.png";

const SpottableComponent = Spottable("div");

const Container = SpotlightContainerDecorator(
  {
    enterTo: "default-element",
  },
  "div"
);

const Template = ({
  isOnTop,
  spotlightId,
  onScrollTop,
  onScrollShelf,
  ...rest
}) => {
  const dispatch = useDispatch();
  const termsData = getHomeTerms("MST00402");
  const [bannerImageLoaded, setBannerImageLoaded] = useState(false);

  useEffect(() => {
    const termsData = getAdDetailAMD("test,", "1234");
    console.log(termsData);
  }, []);

  const onClickBanner = useCallback(() => {}, []);
  useEffect(() => {}, []);
  return (
    <Container
      {...rest}
      spotlightId={spotlightId}
      className={(css.container, css.homeTemplateBox)}
    >
      <div className={css.leftBannerBox}>
        {/* 비디오플레이어 추후 변경 */}
        <div
          style={{
            width: 744,
            height: 420,
            marginTop: 0,
            marginRight: 0,
            marginBottom: 18,
            marginLeft: 0,
            transform: "scale(1)",
            transformOrigin: "top",
          }}
        >
          <ViedoPlayer>
            <source
              src="http://media.w3.org/2010/05/sintel/trailer.mp4"
              type="video/mp4"
            />
          </ViedoPlayer>
        </div>
        <CustomImage
          className={css.banner02}
          delay={0}
          onClickBanner={onClickBanner}
          onImageLoaded={setBannerImageLoaded}
          src={
            banner2
              ? banner2
              : "../../../../assets/Image/img-home-banner-h-02.png"
          }
          hide={""}
        />
      </div>

      <div className={css.bannerFlexRow}>
        <CustomImage
          className={css.banner03}
          delay={0}
          onClickBanner={onClickBanner}
          onImageLoaded={setBannerImageLoaded}
          src={
            banner3
              ? banner3
              : "../../../../assets/Image/img-home-banner-v-01.png"
          }
          hide={""}
        />
        <CustomImage
          className={css.banner04}
          delay={0}
          onClickBanner={onClickBanner}
          onImageLoaded={setBannerImageLoaded}
          src={
            banner4
              ? banner4
              : "../../../../assets/Image/img-home-banner-v-02.png"
          }
          hide={""}
        />
      </div>
    </Container>
  );
};

export default Template;
