(() => {
	const { EventManager, pageHelper, modules, utils } = ShopbySkin;

  let commonData = {};
  EventManager.on('PAGE_LOAD_COMPLETED', (data) => {
    commonData = data;
  });

  class CustomInquiryList extends modules.InquiryList {
    getPersonalInquiries = async () => {
      const {pageSize, keyword, type} = this.propsParam;

      const {data} = await actions.fetchInquiries({
        pageSize: Number(pageSize),
        pageNumber: Number(this.pageNumber),
        searchType: type || 'TITLE',
        keyword: keyword || '',
      });

      return data;
    };

    fetchByPagination = ({data: {items, totalCount}}) => {
      const {pageSize, keyword, type} = this.propsParam;

      const paginationInstance = new utils.Pagination({
        currentPageKey: 'pageNumber',
        pageSizeKey: 'pageSize',
        totalCount,
        currentPage: Number(this.pageNumber),
        itemsPerPage: Number(pageSize),
        visiblePagesCount: this.props.visiblePagesCount,
      });

      const queryParams = {
        pageNumber: this.pageNumber,
        pageSize,
        searchType: type,
        searchKeyword: keyword,
      };
      paginationInstance.setQueryParams(queryParams);
      const pagination = paginationInstance.generate();

      this.store.setState({
        inquiry: {items, totalCount},
        pagination,
        isLoading: false,
        searchKeyword: keyword,
        searchType: type,
      });

      this.setQueryString();
      setParams();

    };

    setQueryString = () => {
      const {keyword, type} = this.propsParam;
      const params = new URLSearchParams(location.search);
      params.set('searchKeyword', keyword || '');
      params.set('searchType', type || 'TITLE');
      params.set('pageNumber', String(this.pageNumber));

      history.replaceState({}, '', `${location.origin}${location.pathname}?${params.toString()}`);
    };

  }

	customElements.define('custom-inquiry-list', CustomInquiryList);

	const setParams = () => {
		const params = new URLSearchParams(window.location.search);
		const keyword = params.get('searchKeyword');

		if (!keyword) return;

		const searchFieldEl = document.querySelector('search-field[shopby-module-key="inquiry-list-search-field"]');
		if (!searchFieldEl) return;

		const newState = {
			...searchFieldEl.store?.getState(),
			keyword: keyword || '',
		};

		searchFieldEl.store?.setState(newState);
		searchFieldEl.handleRender?.({ state: newState });
	};

	const moduleActionHandler = {
		REGISTER: ({ name = "", usesAttachment }) => {
			EventManager.fire("OPEN_LAYER_MODAL", {
				name: "personal-inquiry-form",
				title: `${name ?? "1:1문의"} 등록`,
				data: {
					isModify: false,
					usesAttachment,
					commonData: commonData,
				},
				onClose: ({ reason }) => {
					if (reason === "DID_SUBMIT") {
						EventManager.fire("MODAL_ALERT_OPEN", {
							noticeType: "SUCCESS",
							message: "<em>게시글이 저장되었습니다.</em>",
							onClose: () => {
								location.replace(location.pathname);
							},
						});
					}
				},
			});
		},
	};

	const inquiryFormModuleEl = document.querySelector("inquiry-register");
	inquiryFormModuleEl?.addEventListener("click", ({ target }) => {
		const action = target.getAttribute("shopby-action");
		const name = target
			.closest("[shopby-inquiry-board-name]")
			?.getAttribute("shopby-inquiry-board-name");
		const usesAttachment = target
			.closest("[shopby-uses-attachment]")
			?.getAttribute("shopby-uses-attachment") || true;

		moduleActionHandler[action]?.({ name, usesAttachment });
	});

	const inquiryListModuleEl = document.querySelector("inquiry-list");
	inquiryListModuleEl?.addEventListener("click", ({ target }) => {
		const action = target.getAttribute("shopby-action");
		const inquiryNo = target
			.closest("[shopby-inquiry-no]")
			?.getAttribute("shopby-inquiry-no");
		const name = target
			.closest("[shopby-inquiry-board-name]")
			?.getAttribute("shopby-inquiry-board-name");

		moduleActionHandler[action]?.({ inquiryNo, name });
	});
})();