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;
  };

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