import { computed, onMounted, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import type { Profile } from '@yuxingu/types'
import { api } from '../api/client'
import { ensureAccount } from '../lib/authSession'
import { setAccountNickname } from '../lib/accountNickname'
import {
  avatarInitial,
  createProfilePageActions,
  formatProfileDate,
  profileRelationOptions,
  relationLabel,
} from './profilePageActions'

export { profileRelationOptions, formatProfileDate, avatarInitial, relationLabel }

export function useProfilePage() {
  const route = useRoute()
  const router = useRouter()

  const accountNickname = ref('')
  const items = ref<Profile[]>([])
  const loading = ref(true)
  const error = ref('')
  const busyId = ref('')
  const editing = ref<Profile | null>(null)
  const showAddForm = ref(false)
  const showInviteFill = ref(false)
  const formName = ref('')
  const formY = ref('')
  const formM = ref('')
  const formD = ref('')
  const formPlace = ref('')
  const formRelationType = ref('partner')
  const formGeoVisible = ref(false)
  const formError = ref('')
  const saving = ref(false)
  const newName = ref('')
  const newY = ref('')
  const newM = ref('')
  const newD = ref('')
  const newPlace = ref('')
  const newRelationType = ref('family')
  const addError = ref('')
  const adding = ref(false)
  const inviting = ref(false)
  const invitePath = ref('')
  const inviteError = ref('')
  const inviteHint = ref('')
  const copyBusy = ref(false)

  const selfProfile = computed(() => items.value.find((p) => p.relation === 'self'))
  const others = computed(() => items.value.filter((p) => p.relation !== 'self'))

  const {
    toggleAdd,
    openInviteFill,
    closeInviteFill,
    applyQueryFlags,
    createFillInvite,
    copyInvite,
    load,
    startEdit,
    saveEdit,
    remove,
    addOther,
  } = createProfilePageActions({
    items,
    loading,
    error,
    busyId,
    editing,
    showAddForm,
    showInviteFill,
    formName,
    formY,
    formM,
    formD,
    formPlace,
    formRelationType,
    formGeoVisible,
    formError,
    saving,
    newName,
    newY,
    newM,
    newD,
    newPlace,
    newRelationType,
    addError,
    adding,
    inviting,
    invitePath,
    inviteError,
    inviteHint,
    copyBusy,
    selfProfile,
    routeAdd: () => route.query.add as string | undefined,
    routeInviteFill: () => route.query.inviteFill as string | undefined,
    router,
  })

  watch(
    () => [route.query.add, route.query.inviteFill],
    () => applyQueryFlags(),
  )

  function onNicknameUpdated(n: string) {
    accountNickname.value = n
    setAccountNickname(n)
  }

  onMounted(async () => {
    if (!(await ensureAccount(router, route.fullPath))) return
    try {
      const me = await api.authMe()
      accountNickname.value = me.nickname || ''
      setAccountNickname(accountNickname.value)
    } catch {
      accountNickname.value = ''
    }
    await load()
    applyQueryFlags()
  })

  return {
    accountNickname,
    onNicknameUpdated,
    items,
    loading,
    error,
    busyId,
    editing,
    showAddForm,
    showInviteFill,
    formName,
    formY,
    formM,
    formD,
    formPlace,
    formRelationType,
    formGeoVisible,
    formError,
    saving,
    newName,
    newY,
    newM,
    newD,
    newPlace,
    newRelationType,
    addError,
    adding,
    inviting,
    invitePath,
    inviteError,
    inviteHint,
    copyBusy,
    selfProfile,
    others,
    toggleAdd,
    openInviteFill,
    closeInviteFill,
    createFillInvite,
    copyInvite,
    load,
    startEdit,
    saveEdit,
    remove,
    addOther,
  }
}