// stores/modal.ts
import { defineStore } from 'pinia'
import { ref } from 'vue'

export const useModalStore = defineStore('modal', () => {
  const loginModalRef = ref<any>(null)
  const isModalVisible = ref(false)
  const searchQuery = ref('')

  function updateSearchQuery(keywork:string){
    searchQuery.value = keywork
  }

  function setLoginModal(modalRef: any) {
    loginModalRef.value = modalRef
  }

  function showLoginModal() {
    if (loginModalRef.value?.showModal) {
      loginModalRef.value.showModal()
      isModalVisible.value = true
    }
    else {
      console.warn('Login modal not initialized')
    }
  }

  function hideLoginModal() {
    if (loginModalRef.value?.hideModal) {
      loginModalRef.value.hideModal()
      isModalVisible.value = false
    }
  }

  return {
    loginModalRef,
    isModalVisible,
    setLoginModal,
    showLoginModal,
    hideLoginModal,
    searchQuery,
    updateSearchQuery
  }
},{
  persist: {
    key: 'mc-modal',
    // paths: ['isLoggedIn', 'mymcname', 'token', 'userInfo'], // 只持久化 token
    storage: import.meta.client ? localStorage : undefined,
  },
  // persist: {
  //   storage: {
  //     getItem(key) {
  //       return window.localStorage.getItem(key)
  //     },
  //     setItem(key, value) {
  //       window.localStorage.setItem(key, value)
  //     },
  //   },
  //   serializer: {
  //     deserialize: parse,
  //     serialize: stringify,
  //   },
  // },
})