import { ref } from 'vue'
import { navigateBack, showToast } from '@tarojs/taro'
import { pinia, useCustomerStore, useFulfillmentStore } from '@/stores'

interface InputLikeEvent {
  detail?: {
    value?: string
  }
}

function readInputValue (event: InputLikeEvent) {
  return event.detail?.value || ''
}

export function useAddressPage () {
  const customerStore = useCustomerStore(pinia)
  const fulfillmentStore = useFulfillmentStore(pinia)
  const name = ref(fulfillmentStore.address?.name || customerStore.name)
  const phone = ref(fulfillmentStore.address?.phone || customerStore.phone)
  const address = ref(fulfillmentStore.address?.address || '')
  const detail = ref(fulfillmentStore.address?.detail || '')

  function handleNameInput (event: InputLikeEvent) {
    name.value = readInputValue(event)
  }

  function handlePhoneInput (event: InputLikeEvent) {
    phone.value = readInputValue(event)
  }

  function handleAddressInput (event: InputLikeEvent) {
    address.value = readInputValue(event)
  }

  function handleDetailInput (event: InputLikeEvent) {
    detail.value = readInputValue(event)
  }

  async function handleSave () {
    if (!name.value.trim() || !phone.value.trim() || !address.value.trim()) {
      await showToast({ title: '请完善地址信息', icon: 'none' })
      return
    }

    fulfillmentStore.setAddress({
      id: 'local-default',
      name: name.value.trim(),
      phone: phone.value.trim(),
      address: address.value.trim(),
      detail: detail.value.trim()
    })

    await showToast({ title: '地址已保存', icon: 'success' })
    setTimeout(() => {
      void navigateBack()
    }, 250)
  }

  return {
    address,
    detail,
    handleAddressInput,
    handleDetailInput,
    handleNameInput,
    handlePhoneInput,
    handleSave,
    name,
    phone
  }
}