import React, { useEffect } from "react";

import { useDispatch } from "react-redux";

import ThemeDecorator from "@enact/sandstone/ThemeDecorator";

import { getBrandList } from "../actions/brandActions";
import { getAuthenticationCode } from "../actions/deviceActions";
import {
  getHomeLayout,
  getHomeMainContents,
  getHomeMenu,
  getThemeCurationInfo,
} from "../actions/homeActions";
import { getSubCategory, getTop20Show } from "../actions/mainActions";
import { getMyRecommandedKeyword } from "../actions/myPageActions";
import { getOnSaleInfo } from "../actions/onSaleActions";
import { getBestSeller } from "../actions/productActions";
import MainView from "../views/MainView/MainView";
import css from "./App.module.less";

function AppBase(props) {
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(getAuthenticationCode());
    dispatch(getHomeMenu());
    dispatch(getHomeLayout());
    dispatch(getHomeMainContents());
    dispatch(getOnSaleInfo({ categoryIncFlag: "Y", lgCatCd: "" }));
    dispatch(getBrandList());
    dispatch(getMyRecommandedKeyword());
    dispatch(getBestSeller());
    dispatch(
      getSubCategory({
        lgCatCd: "1000",
        patnrIdList: "",
        pageSize: "",
        tabType: "",
        filterType: "",
      })
    );
    dispatch(getTop20Show());
    dispatch(getThemeCurationInfo());
  }, [dispatch]);

  return <MainView />;
}

const App = ThemeDecorator({ noAutoFocus: true }, AppBase);

export default App;
export { App, AppBase };