import { defineStore } from 'pinia'
import { ref, reactive } from 'vue'
import { useUsersStore } from '@/stores/usersStore'
import { useGlobalStore } from '@/stores/globalStore'

export const useSiteManagementPageStore = defineStore('siteManagementPageStore', () => {
  const usersStore = useUsersStore()
  const globalStore = useGlobalStore()

  const selectedPage = ref<number | null>(null)
  const allPagesList = ref<Record<string, any>[]>([])
  const pageBaseForm = reactive<Record<string, any>>({
    slug: '',
    title: '',
    content: '',
    etiket: '',
    parentPageId: null,
    status: 1,
    appUserId: usersStore.userId
  })

  const pageForm = reactive<Record<string, any>>({})
  const pageSafeForm = reactive<Record<string, any>>({})
  const formChanged = ref<boolean>(false)
  const loaded = ref<boolean>(false)
  const isNew = ref<boolean>(false)

  const ResetForm = () => {
    globalStore.ResetObject(pageForm, pageBaseForm)
    Object.assign(pageForm, pageBaseForm)
  }
  const RestoreForm = () => {
    Object.assign(pageForm, pageSafeForm)
    formChanged.value = false
  }
  const CreateSlug = () => {
    pageForm.slug = globalStore.CreateSlug(pageForm.title)
    formChanged.value = true
  }

  return {
    selectedPage,
    allPagesList,
    pageBaseForm,
    pageForm,
    pageSafeForm,
    formChanged,
    loaded,
    isNew,
    ResetForm,
    RestoreForm,
    CreateSlug
  }
})
