(() => {
  const { EventManager, Handlebars, utils } = ShopbySkin;
  const param = utils.getQueryParams();

  let shopbyCommonData = {};
  let faqConfig = [];
  EventManager.on('PAGE_LOAD_COMPLETED', async (commonData) => {
    shopbyCommonData = commonData;
    const { boardConfigs = [] } = shopbyCommonData.allBoardConfig;
    boardConfigs.forEach(config =>{
      if(config.boardId === 'faq'){
        faqConfig = config;
      }
    });

    const kaimenShopbyApi = new KaimenShopbyApi();
    const request = {
      pathVariable : {
        boardNo: faqConfig.boardNo,
      },
      queryString: {
        ...param,
        pageSize: param.pageSize !== undefined ? param.pageSize : 20,
        pageNumber: param.pageNumber !== undefined ? param.pageNumber : 1,
        hasTotalCount: true,
      }
    };
    const { data : lists } = await kaimenShopbyApi.getBoardsBoardNoArticles(request);
    const template = Handlebars.compile(document.querySelector("#boardArticlesTemplate").innerHTML);
    let list = template({
      ...lists,
      pageSize: param.pageSize !== undefined ? param.pageSize : 20,
      pageNumber: param.pageNumber !== undefined ? param.pageNumber : 1,
    });
    document.querySelector("#boardArticles").innerHTML = list;
    setPagination(param, lists.totalCount);

    const tplFaqTab = Handlebars.compile(document.querySelector("#faqTabTemplate").innerHTML);
    let faqTab = tplFaqTab({
      boardConfig: faqConfig,
      currentCategoryNo: Number(param.categoryNo),
    });
    document.querySelector("#faqTab").innerHTML = faqTab;
  });

  Handlebars.registerHelper({
    faqCategoryIcon(index){
      const ico = index + 1;
      return ico > 10 ? ico : '0'+ico;
    },
  });
})();