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'
import useDevice from '@/core/hooks/useDevice';

const Voucher = () => {
  const { isMobile } = useDevice();
  const toast = useToast();
  const voucherQuery = useQuery({
    queryKey: ['voucher.all-voucher'],
    queryFn: getVoucher
  })
  
  const swiperVoucher: SwiperProps = {
    autoplay: {
      delay: 6000,
      disableOnInteraction: false
    },
    loop: false,
    className: 'h-[160px] w-full',
    slidesPerView: isMobile ? 1.2 : 3,
    spaceBetween: 16
  }
  
  const vouchers = useMemo(() => voucherQuery.data || [], [voucherQuery.data]);

  const copyText = (text: string) => {
    if (navigator.clipboard && navigator.clipboard.writeText) {
      navigator.clipboard.writeText(text)
        .then(() => {
          toast({
            title: 'Salin ke papan klip',
            description: 'Kode voucher berhasil disalin',
            status: 'success',
            duration: 3000,
            isClosable: true,
            position: 'top',
          })
        })
        .catch(() => {
          fallbackCopyTextToClipboard(text);
        });
    } else {
      fallbackCopyTextToClipboard(text);
    }
  }

  const fallbackCopyTextToClipboard = (text: string) => {
    const textArea = document.createElement("textarea");
    textArea.value = text;
    // Tambahkan style untuk menyembunyikan textArea secara visual
    textArea.style.position = 'fixed';
    textArea.style.top = '0';
    textArea.style.left = '0';
    textArea.style.width = '2em';
    textArea.style.height = '2em';
    textArea.style.padding = '0';
    textArea.style.border = 'none';
    textArea.style.outline = 'none';
    textArea.style.boxShadow = 'none';
    textArea.style.background = 'transparent';
    document.body.appendChild(textArea);
    textArea.focus();
    textArea.select();
    try {
      document.execCommand('copy');
      toast({
        title: 'Salin ke papan klip',
        description: 'Kode voucher berhasil disalin',
        status: 'success',
        duration: 3000,
        isClosable: true,
        position: 'top',
      })
    } catch (err) {
      console.error('Fallback: Oops, unable to copy', err);
    }
    document.body.removeChild(textArea);
  }

  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}</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