import type { ColorObject } from '#layers/types/api/common'
import type {
  PageDataTemplate,
  PageDataValue,
  PageDataMetaTag,
} from '#layers/types/api/pageData'

export const usePageDataStore = defineStore('pageData', () => {
  const getInitialState = () => ({
    pageData: null as PageDataValue | null,
    pageLayoutType: 'default' as 'default' | 'promotion',
    pageName: '' as string,
    pageNameEn: '' as string,
    pageMetaTag: null as PageDataMetaTag | null,
    pageTemplates: [] as PageDataTemplate[],
    pageTemplatesIds: [] as string[],
    isUseMetaTag: false as boolean,
    isUseTopBtn: false as boolean,
    isUseSnsBtn: false as boolean,
    isUseLnb: false as boolean,
    isLoginRequired: false as boolean,
    topBtnColorJson: null as ColorObject | null,
  })

  const state = reactive(getInitialState())

  // 페이지 레이아웃 타입 결정
  const getLayoutType = (
    pageData: PageDataValue | null
  ): 'default' | 'promotion' => {
    return pageData?.page_type === 2 ? 'promotion' : 'default'
  }

  // 템플릿 표시 여부 확인
  const isTemplateVisible = (template: PageDataTemplate): boolean => {
    const json = template.page_ver_tmpl_json
    return (
      !!json &&
      Object.keys(json).length > 0 &&
      template.page_ver_tmpl_name_en !== null
    )
  }

  // 템플릿 목록 계산
  const getVisibleTemplates = (
    templates?: PageDataValue['templates'] | null
  ): PageDataTemplate[] => {
    if (!templates) return []
    return Object.values(templates).filter(isTemplateVisible)
  }

  const setPageData = (response: PageDataValue) => {
    const layoutType = getLayoutType(response)
    const visibleTemplates = getVisibleTemplates(response.templates)
    const templateIds = visibleTemplates.map(
      template => template.page_ver_tmpl_name_en
    )

    state.pageData = response
    state.pageLayoutType = layoutType
    state.pageName = response.page_name
    state.pageNameEn = response.page_name_en
    state.pageMetaTag = response.meta_tag_json
    state.pageTemplates = visibleTemplates
    state.pageTemplatesIds = templateIds
    state.isUseMetaTag = response.meta_tag_type === 2
    state.isUseTopBtn = response.use_top_btn
    state.isUseSnsBtn = response.use_sns_btn
    state.isUseLnb = response.use_lnb
    state.isLoginRequired = response.is_login_required === 1
    state.topBtnColorJson = response.top_btn_color_json
  }

  const clearPageData = () => {
    Object.assign(state, getInitialState())
  }

  return {
    ...toRefs(state),
    setPageData,
    clearPageData,
  }
})