import { defineStore } from 'pinia';
import Cookies from 'js-cookie';
import { ref } from 'vue';

export const useAppStore = defineStore('app', () => {
  const sidebar = ref({
    opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true,
    withoutAnimation: false
  });
  const device = ref('desktop');
  const size = ref(Cookies.get('size') || 'default');
  
  function toggleSidebar() {
    sidebar.value.opened = !sidebar.value.opened;
    sidebar.value.withoutAnimation = false;
    if (sidebar.value.opened) {
      Cookies.set('sidebarStatus', 1);
    } else {
      Cookies.set('sidebarStatus', 0);
    }
  }
  
  function closeSidebar({ withoutAnimation }) {
    Cookies.set('sidebarStatus', 0);
    sidebar.value.opened = false;
    sidebar.value.withoutAnimation = withoutAnimation;
  }
  
  function toggleDevice(device) {
    device.value = device;
  }
  
  function setSize(size) {
    size.value = size;
    Cookies.set('size', size);
  }
  
  return { sidebar, device, size, toggleSidebar, closeSidebar, toggleDevice, setSize };
});