import React, { useEffect, useState } from 'react'
import { CheckIcon, PlusIcon } from 'lucide-react'
import { IPromotion } from '~/types/promotion'
import { upsertUserCart } from '~/services/cart'
import { getAuth } from '~/libs/auth'
import { Button, Spinner, useToast } from '@chakra-ui/react'
import Link from 'next/link'
import { useRouter } from 'next/router'

type Props = {
  promotion: IPromotion
}

type Status = 'idle' | 'loading' | 'success'

const ProductPromoAddToCart = ({ promotion }: Props) => {
  const auth = getAuth()
  const toast = useToast()
  const router = useRouter()

  const [status, setStatus] = useState<Status>('idle')

  const handleButton = async () => {
    if (typeof auth !== 'object') {
      const currentUrl = encodeURIComponent(router.asPath)
      toast({
        title: 'Masuk Akun',
        description: <>
          Masuk akun untuk dapat menambahkan promo ke keranjang belanja. {' '}
          <Link className='underline' href={`/login?next=${currentUrl}`}>Klik disini</Link>
        </>,
        status: 'error',
        duration: 4000,
        isClosable: true,
        position: 'top',
      })
      return
    }
    if (status === 'success') return

    setStatus('loading')
    await upsertUserCart(auth.id, 'promotion', promotion.id, 1, true)
    setStatus('idle')

    toast({
      title: 'Tambah ke keranjang',
      description: 'Berhasil menambahkan barang ke keranjang belanja',
      status: 'success',
      duration: 3000,
      isClosable: true,
      position: 'top',
    })
  }

  useEffect(() => {
    if (status === 'success') setTimeout(() => { setStatus('idle') }, 3000)
  }, [status])

  return (
    <Button
      colorScheme='yellow'
      px={2}
      w='110px'
      gap={1}
      isDisabled={status === 'loading'}
      onClick={handleButton}
    >
      {status === 'success' && <CheckIcon size={16} />}
      {status === 'loading' && <Spinner size='xs' mr={1.5} />}
      {status === 'idle' && <PlusIcon size={16} />}

      {status === 'success' && <span>Berhasil</span>}
      {status !== 'success' && <span>Keranjang</span>}
    </Button>
  )
}

export default ProductPromoAddToCart