import React, { useEffect, useState } from 'react'
import Image from '@/core/components/elements/Image/Image'
import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
import CountDown2 from '@/core/components/elements/CountDown/CountDown2'
import currencyFormat from '@/core/utils/currencyFormat'
import { getPromotionProgram } from '../api/homepageApi'

const PromotionType = ({
  isModal = false,
  variantId,
  setPromotionActiveId,
  promotionActiveId,
  quantity,
  product = null,
  setProducts = null
}) => {
  const [selectedPromo, setSelectedPromo] = useState(null)
  const [promotionType, setPromotionType] = useState(false)
  const [promos, setPromotionList] = useState(null)
  const [activeTitle, setActiveTitle] = useState(null)
  const [quantitySet, setQuantity] = useState(null)

  useEffect(() => {
    const id = variantId
    const listProgram = async () => {
      const programs = await getPromotionProgram({ id })
      if (programs?.length > 0) {
        setPromotionList(programs)
        setActiveTitle(programs?.[0].type.value)
      }
    }
    listProgram()
    setSelectedPromo(promotionActiveId)
    if (product) {
      const variant = product.variants.find((variant) => variant.id === variantId)
      setQuantity(variant.quantity)
    }else{
      setQuantity(quantity)
    }
  }, [])

  const groupingData = promos?.reduce((groups, item) => {
    const promoType = item.type.value
    if (!groups[promoType]) {
      groups[promoType] = []
    }
    groups[promoType].push(item)

    return groups
  }, {})

  const handlePromoClick = (promoId, minQty) => {
    if (quantitySet >= minQty) {
      if (promoId == selectedPromo) {
        setSelectedPromo(null)
        setPromotionActiveId(null)
        if (product) {
          const updateProdcuts = () => {
            let variantIndex = product.variants.findIndex((varian) => varian.id == variantId)
            product.variants[variantIndex].programActive = null

            setProducts(product)
          }
          updateProdcuts()
        }
      } else {
        setSelectedPromo(promoId)
        setPromotionActiveId(promoId)
        if (product) {
          const updateProdcuts = () => {
            let variantIndex = product.variants.findIndex((varian) => varian.id == variantId)
            product.variants[variantIndex].programActive = promoId

            setProducts(product)
          }
          updateProdcuts()
        }
      }
    }
  }

  const handlePopUp = () => {
    if (isModal == false) {
      setPromotionType(true)
    }
  }

  return (
    promos && (
      <>
        <div className='h-[50%] relative'>
          <div className='relative rounded-lg border border-solid border-gray-300 mb-2 w-full'>
            <Image src='https://placehold.co/537x50.png' alt='' layout='fill' objectFit='cover' />
            <div className='h-full absolute top-0 left-0 w-full flex items-center justify-between p-2'>
              <span className='font-semibold text-lg text-white'>Promo Tersedia</span>
              <button type='button' onClick={() => handlePopUp()} className='py-2 btn-yellow'>
                Lihat Semua
              </button>
            </div>
          </div>
          <div
            className={`w-full ${
              isModal == true ? '' : 'grid grid-cols-3 gap-1 bg-gray-200 '
            }  p-2 rounded-lg`}
          >
            {isModal === true ? (
              <div>
                <div className='flex gap-2 mb-3'>
                  {Object.keys(groupingData).map((index) => {
                    return (
                      <>
                        <button
                          onClick={() => setActiveTitle(index)}
                          className={`py-1 px-2 rounded-lg flex justify-center items-center text-sm ${
                            activeTitle === index ? 'badge-yellow  text-black' : ''
                          } `}
                        >
                          {groupingData[index][0].type.label}
                        </button>
                      </>
                    )
                  })}
                </div>
                {activeTitle &&
                  groupingData[activeTitle].map((item, i) => (
                    <div
                      key={i}
                      onClick={() => handlePromoClick(item.id, item.minimumPurchaseQty)}
                      className={`border border-solid mb-5 w-full hover:cursor-pointer ${
                        selectedPromo
                          ? selectedPromo === item.id
                            ? 'opacity-100 border-red-500 bg-red-100'
                            : 'opacity-50  pointer-events-none'
                          : 'opacity-100'
                      } ${
                        quantitySet >= item.minimumPurchaseQty
                          ? ''
                          : 'opacity-50  pointer-events-none'
                      } `}
                    >
                      <div className={`flex`}>
                        <div className=''>
                          <Image
                            src={item.Image}
                            alt={item.name}
                            className={`flex-1 w-[170px] object-cover`}
                          />
                        </div>
                        <div className='p-2 w-full'>
                          <div className='flex justify-between mb-1'>
                            <div className='text-danger-500 font-semibold mb-1 mt-1'>
                              Waktu Tersisa
                            </div>
                            <div>
                              <CountDown2 initialTime={item.remainingTime}></CountDown2>
                            </div>
                          </div>
                          <p className='text-justify text-gray-500 line-clamp-3'>{item.name}</p>
                          <div className='mt-4'>
                            {/* {item.type.value === 'bundling' && (
                              <> */}
                                <div className='flex gap-x-2 mt-3   justify-between items-center'>
                                  <div className='flex gap-x-2 items-center '>
                                    <div className='text-gray_r-11 line-through text-caption-1 mt-1'>
                                      {currencyFormat(item.totalSavings)}
                                    </div>
                                    <div className='text-danger-500 font-semibold '>Gratis</div>
                                  </div>
                                  <div className='text-danger-500 font-semibold '>
                                    {quantitySet < item.minimumPurchaseQty
                                      ? 'Tambah ' +
                                        (parseInt(item.minimumPurchaseQty) -
                                          parseInt(quantitySet)) +
                                        ' lagi'
                                      : ''}
                                  </div>
                                </div>
                              {/* </>
                            )} */}
                            {/* {item.type.value === 'special_price' && (
                              <>
                                <div className='flex gap-x-2 mt-3 items-center'>
                                  <div className='text-danger-500 font-semibold '> {currencyFormat(item.totalSavings)}</div>
                                </div>
                              </>
                            )}
                            {item.type.value === 'discount_loading' && (
                              <>
                                <div className='flex justify-between'>
                                  <div className='text-danger-500 font-semibold '>
                                    {currencyFormat(item.totalSavings)}
                                  </div>
                                  <div className='text-danger-500 font-semibold '>
                                    {quantitySet < item.minimumPurchaseQty
                                      ? 'Tambah ' +
                                        (parseInt(item.minimumPurchaseQty) -
                                          parseInt(quantitySet)) +
                                        ' lagi'
                                      : ''}
                                  </div>
                                </div>
                              </>
                            )} */}
                          </div>
                        </div>
                      </div>
                    </div>
                  ))}
              </div>
            ) : (
              promos.map((promo, index) => {
                if (index > 2) {
                  return null
                } else {
                  if (index === 2 && promos.length > 2) {
                    return (
                      <>
                        <div
                          onClick={() => setPromotionType(true)}
                          className={` border border-solid bg-white mb-5 w-full hover:cursor-pointer opacity-100 flex flex-col justify-center items-center`}
                        >
                          <div className='flex justify-center items-center'>
                            <div className='rounded-full shadow-lg w-10 h-10 flex justify-center items-center'>
                              <svg
                                aria-hidden='true'
                                fill='none'
                                stroke='currentColor'
                                stroke-width='1.5'
                                viewBox='0 0 24 24'
                                className='text-red-500  w-20 h-20'
                              >
                                <path
                                  d='M12 6v12m6-6H6'
                                  stroke-linecap='round'
                                  stroke-linejoin='round'
                                ></path>
                              </svg>
                            </div>
                          </div>

                          <span className='mt-2 text-sm'>Lihat Promo Lainya</span>
                        </div>
                      </>
                    )
                  }
                  return (
                    <>
                      <div
                        key={promo.id}
                        onClick={() => setPromotionType(true)}
                        className={`border border-solid bg-white  mb-5 w-full hover:cursor-pointer`}
                      >
                        <div className={`items-center`}>
                          <div className=''>
                            <Image
                              src={promo.Image}
                              alt={promo.name}
                              className={`flex-1 w-full object-cover`}
                            />
                          </div>
                          <div className='p-2'>
                            <div className='badge-yellow  text-black mb-1'>{promo.type.label}</div>
                            <p className='text-justify line-clamp-2'>{promo.name}</p>
                            <div className='text-danger-500 font-semibold mb-1 mt-1'>
                              {/* {currencyFormat(promo.totalSavings)} */}
                            </div>
                            {/* <div className='w-full bg-yellow-200 rounded-full h-1.5 mb-2'>
                              <div className='bg-yellow-500 h-1.5 rounded-full w-[45%]'></div>
                            </div> */}
                            <div>
                              <CountDown2 initialTime={promo.remainingTime}></CountDown2>
                            </div>
                          </div>
                        </div>
                      </div>
                    </>
                  )
                }
              })
            )}
            <BottomPopup
              className=' !h-[75%]'
              title='Pakai Promo'
              active={promotionType}
              close={() => setPromotionType(false)}
            >
              <div className='flex mt-4'>
                <PromotionType
                  isModal={true}
                  variantId={variantId}
                  setPromotionActiveId={setPromotionActiveId}
                  promotionActiveId={promotionActiveId}
                  quantity={quantitySet}
                ></PromotionType>
              </div>
            </BottomPopup>
          </div>
        </div>
      </>
    )
  )
}

export default PromotionType