import React, { useEffect } from "react";

import { useDispatch } from "react-redux";

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

import { getBrandList } from "../features/brand/brandsSlice";
import { getAuthenticationCode } from "../features/device/deviceSlice";
import { getHomeMenu } from "../features/home/homeSlice";
import { getMyRecommandedKeyword } from "../features/mypage/myPageSlice";
import { getOnSaleInfo } from "../features/onSale/onSaleSlice";
import { getSubCategory } from "../features/main/mainSlice";
import MainView from "../views/MainView/MainView";
import css from "./App.module.less";

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

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

  return <MainView />;
}

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

export default App;
export { App, AppBase };