import { useStorage } from '@vueuse/core'
import { defineStore } from 'pinia'

export type StoryOptionsPlacement = 'right' | 'bottom'

export interface LayoutSettings {
  storyListVisible: boolean
  storyOptionsVisible: boolean
  storyOptionsPlacement: StoryOptionsPlacement
}

export const useLayoutStore = defineStore('layout', () => {
  const settings = useStorage<LayoutSettings>('_poveste-layout-v1', {
    storyListVisible: true,
    storyOptionsVisible: true,
    storyOptionsPlacement: 'right',
  })

  return {
    settings,
  }
})