import { createSharedComposable } from '@vueuse/core'

export const useCheckout = createSharedComposable(() => {
  const router = useRouter()
  const route = useRoute()

  const checkoutSteps = [
    {
      step: 1,
      title: 'delivery',
    },
    {
      step: 2,
      title: 'contacts',
    },
    {
      step: 3,
      title: 'summary',
    },
  ]

  const currentCheckoutStep = ref(checkoutSteps.find(value => value.title === route.path.split('/').pop()))

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

  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.title}`)
    }
  }

  return {
    checkoutSteps,
    currentCheckoutStep,

    previewStep,
    nextStep,
  }
})