import type { Ref } from 'vue'

export const useLayoutStore = defineStore('layout', () => {
  const isHeaderVisible: Ref<boolean> = ref(false)

  const setIsHeaderVisible = (value: boolean) => {
    isHeaderVisible.value = value
  }

  const isBannerVisible: Ref<boolean> = ref(false)

  const setIsBannerVisible = (value: boolean) => {
    isFooterVisible.value = value
  }

  const isFooterVisible: Ref<boolean> = ref(false)

  const setIsFooterVisible = (value: boolean) => {
    isFooterVisible.value = value
  }

  const resetAnchoredSections = () => {
    isAnchoredSectionOnScreen.value = {}
  }

  const isAnchoredSectionOnScreen: Ref<Record<string, boolean>> = ref({})

  const setIsAnchoredSectionOnScreen = (sectionId: string, value: boolean) => {
    isAnchoredSectionOnScreen.value[sectionId] = value
  }

  const isCookieConsentDialogVisible: Ref<boolean> = ref(false)
  const setIsCookieConsentDialogVisible = (value: boolean) => {
    isCookieConsentDialogVisible.value = value
  }

  return {
    isHeaderVisible,
    setIsHeaderVisible,
    isBannerVisible,
    setIsBannerVisible,
    isFooterVisible,
    setIsFooterVisible,
    isAnchoredSectionOnScreen,
    resetAnchoredSections,
    setIsAnchoredSectionOnScreen,
    isCookieConsentDialogVisible,
    setIsCookieConsentDialogVisible,
  }
})