import { defineStore } from "pinia";
import { computed, ref } from "vue";
import { useSettingsStore } from "./settingsStore";

export const useLayoutStore = defineStore("layout", () => {
  const settingsStore = useSettingsStore();

  const sidebarHidden = ref(false);

  const sidebarCollapsed = computed(() => settingsStore.settings.sidebarCollapsed);
  const sidebarWidth = computed(() => settingsStore.settings.sidebarWidth);
  const sidebarPinned = computed(() => settingsStore.settings.sidebarPinned);

  const toggleSidebar = () => {
    settingsStore.setSidebarCollapsed(!settingsStore.settings.sidebarCollapsed);
  };

  const toggleSidebarHidden = () => {
    sidebarHidden.value = !sidebarHidden.value;
  };

  const setSidebarHidden = (hidden: boolean) => {
    sidebarHidden.value = hidden;
  };

  const setSidebarWidth = (width: number) => {
    settingsStore.setSidebarWidth(width);
  };

  const actualSidebarWidth = computed(() => {
    if (sidebarHidden.value) return "0px";
    if (settingsStore.settings.sidebarCollapsed) return "64px";
    return `${settingsStore.settings.sidebarWidth}px`;
  });

  const mainContentWidth = computed(() => {
    if (sidebarHidden.value) return "100%";
    if (!settingsStore.settings.sidebarPinned) return "100%";
    if (settingsStore.settings.sidebarCollapsed) return "calc(100% - 64px)";
    return `calc(100% - ${settingsStore.settings.sidebarWidth}px)`;
  });

  return {
    sidebarCollapsed,
    sidebarWidth,
    sidebarPinned,
    sidebarHidden: computed(() => sidebarHidden.value),
    actualSidebarWidth,
    mainContentWidth,
    toggleSidebar,
    toggleSidebarHidden,
    setSidebarHidden,
    setSidebarWidth
  };
});
