import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'

export function useQueryCRUDMode(key: string = 'mode') {
  const route = useRoute()
  const router = useRouter()

  type ModeType = 'list' | 'entry'
  const mode = useState<ModeType>('route-query-' + key, () => 'list')
  const modeSrc = computed<ModeType>({
    get: () => (route.query[key] && route.query[key] === 'entry' ? 'entry' : 'list'),
    set: (val) => {
      mode.value = val
      router.push({
        path: route.path,
        query: {
          ...route.query,
          [key]: val,
        },
      })
    },
  })

  const goToEntry = () => {
    modeSrc.value = 'entry'
  }
  const backToList = () => {
    modeSrc.value = 'list'
  }

  return { mode, goToEntry, backToList }
}

export function useQueryCRUDRecordId(key: string = 'record-id') {
  const route = useRoute()
  const router = useRouter()

  const recordId = useState('route-query-' + key, () => '')
  computed({
    get: () => route.query[key],
    set: (val: string) => {
      recordId.value = val
      router.replace({
        path: route.path,
        query: {
          ...route.query,
          [key]: val,
        },
      })
    },
  })

  return { recordId }
}