import { createSharedComposable, useStorage } from '@vueuse/core'

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

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

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

  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()) || checkoutSteps[0])

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

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

  return {
    contacts,
    setContacts,

    checkoutSteps,
    currentCheckoutStep,

    previewStep,
    nextStep,
    setStep,
  }
})