import type { PickupPoint } from '~/server/shared/types/yandex_pvz'
import { createSharedComposable, useMediaQuery, useStorage } from '@vueuse/core'

export const useCheckout = createSharedComposable(() => {
  const router = useRouter()
  const route = useRoute()
  const isMobile = useMediaQuery('(max-width: 1280px)')

  const checkoutPickupPoint = useStorage<PickupPoint | undefined>(
    'checkout-pickupPoint',
    undefined,
    undefined,
    {
      serializer: {
        read: (v: string) => v ? JSON.parse(v) : undefined,
        write: (v: PickupPoint | undefined) => JSON.stringify(v),
      },
    },
  )

  const setCheckoutPickupPoint = (point: PickupPoint | undefined) => {
    checkoutPickupPoint.value = point
  }

  const isPickupPointSelected = computed(() => !!checkoutPickupPoint.value)

  const checkoutContacts = useStorage('checkout-contacts', { name: '', surname: '', phone: '', email: '' })

  const setCheckoutContacts = (data: { name: string, surname: string, phone: string, email: string }) => {
    checkoutContacts.value = data
  }

  const checkoutSteps = [
    {
      step: 1,
      title: isMobile.value ? 'mobileDelivery' : 'delivery',
      route: 'delivery',
    },
    {
      step: 2,
      title: isMobile.value ? 'mobileContacts' : 'contacts',
      route: 'contacts',
    },
    {
      step: 3,
      title: isMobile.value ? 'mobileSummary' : 'summary',
      route: 'summary',
    },
  ]

  const currentCheckoutStep
    = ref(checkoutSteps.find(value => value.route === route.path.split('/').pop()) || checkoutSteps[0])

  function previewStep() {
    if (isPickupPointSelected.value && !isMobile.value) {
      setCheckoutPickupPoint(undefined)
      return
    }

    const findIndex = checkoutSteps.findIndex(value => value.step === currentCheckoutStep.value.step)
    if (findIndex !== 0) {
      currentCheckoutStep.value = checkoutSteps[findIndex - 1]
      router.push(`/checkout/${currentCheckoutStep?.value.route}`)
    }
    else {
      router.push(`/cart`)
    }
  }

  function nextStep() {
    const findIndex = checkoutSteps.findIndex(value => value.step === currentCheckoutStep.value.step)
    if (findIndex + 1 !== checkoutSteps.length) {
      currentCheckoutStep.value = checkoutSteps[findIndex + 1]
      router.push(`/checkout/${currentCheckoutStep?.value.route}`)
    }
  }

  function setStep(pathName: string) {
    currentCheckoutStep.value = checkoutSteps.find(value => value.route === pathName) || checkoutSteps[0]
    router.push(`/checkout/${pathName}`)
  }

  return {
    isPickupPointSelected,
    checkoutPickupPoint,
    setCheckoutPickupPoint,

    checkoutContacts,
    setCheckoutContacts,

    checkoutSteps,
    currentCheckoutStep,

    previewStep,
    nextStep,
    setStep,
  }
})