import { useMemo } from 'react'
import { useQuery } from 'react-query'
import { Swiper, SwiperProps, SwiperSlide } from 'swiper/react'
import { getVoucher } from '~/services/voucher'
import style from '../styles/voucher.module.css'
import Image from 'next/image'
import { useToast } from '@chakra-ui/react'

const swiperVoucher: SwiperProps = {
  autoplay: {
    delay: 6000,
    disableOnInteraction: false
  },
  loop: false,
  className: 'h-[160px] w-full',
  slidesPerView: 3,
  spaceBetween: 16
}

const Voucher = () => {
  const toast = useToast();
  const voucherQuery = useQuery({
    queryKey: ['voucher.all-voucher'],
    queryFn: getVoucher
  })

  const vouchers = useMemo(() => voucherQuery.data || [], [voucherQuery.data]);

  const copyText = (text: string) => {
    navigator.clipboard.writeText(text)
    toast({
      title: 'Salin ke papan klip',
      description: 'Kode voucher berhasil disalin',
      status: 'success',
      duration: 3000,
      isClosable: true,
      position: 'bottom',
    })
  }

  return (
    <>
      <div className={style['title']}>Pakai Voucher Belanja</div>

      <div className='h-6' />

      {voucherQuery.isLoading && (
        <div className='grid grid-cols-3 gap-x-4 animate-pulse'>
          {Array.from({ length: 3 }).map((_, index) => (
            <div key={index} className='w-full h-[160px] bg-gray-200 rounded-xl' />
          ))}
        </div>
      )}
      {!voucherQuery.isLoading && (
        <div className={style['voucher-section']}>
          <Swiper {...swiperVoucher}>
            {vouchers.map((voucher) => (
              <SwiperSlide key={voucher.id} className='pb-2'>
                <div className={style['voucher-card']}>
                  <Image src={voucher.image} alt={voucher.name} width={128} height={128} className={style['voucher-image']} />

                  <div className={style['voucher-content']}>
                    <div className={style['voucher-title']}>{voucher.name}</div>
                    <div className={style['voucher-desc']}>{voucher.description} Lorem ipsum dolor sit, amet consectetur adipisicing elit. Officiis magni nobis sint aspernatur soluta deserunt excepturi delectus corporis libero, voluptate odit! Cupiditate, quibusdam ipsa saepe voluptas repudiandae eum quaerat suscipit.</div>
                    <div className={style['voucher-bottom']}>
                      <div>
                        <div className={style['voucher-code-desc']}>Kode Promo</div>
                        <div className={style['voucher-code']}>{voucher.code}</div>
                      </div>
                      <button className={style['voucher-copy']} onClick={() => copyText(voucher.code)}>Salin</button>
                    </div>
                  </div>
                </div>
              </SwiperSlide>
            ))}
          </Swiper>
        </div>
      )}

    </>
  )
}

export default Voucher