import { NostrEvent } from '@nostr-dev-kit/ndk'
import { ZapPopUp } from 'components/Zap'
import {
  useAppSelector,
  useNDKContext,
  useBodyScrollDisable,
  useDidMount
} from 'hooks'
import { useState } from 'react'
import { toast } from 'react-toastify'
import { abbreviateNumber } from 'utils'

export const Zap = (props: NostrEvent) => {
  const [isOpen, setIsOpen] = useState(false)
  const [totalZappedAmount, setTotalZappedAmount] = useState(0)
  const [hasZapped, setHasZapped] = useState(false)

  const userState = useAppSelector((state) => state.user)
  const { getTotalZapAmount } = useNDKContext()

  useBodyScrollDisable(isOpen)

  useDidMount(() => {
    getTotalZapAmount(
      props.pubkey,
      props.id!,
      undefined,
      userState.user?.pubkey as string
    )
      .then((res) => {
        setTotalZappedAmount(res.accumulatedZapAmount)
        setHasZapped(res.hasZapped)
      })
      .catch((err) => {
        toast.error(err.message || err)
      })
  })

  return (
    <>
      <div
        className={`IBMSMSMBSSCL_CAElement IBMSMSMBSSCL_CAEBolt ${
          hasZapped ? 'IBMSMSMBSSCL_CAEBoltActive' : ''
        }`}
        onClick={() => setIsOpen(true)}
      >
        <svg
          xmlns='http://www.w3.org/2000/svg'
          viewBox='-64 0 512 512'
          width='1em'
          height='1em'
          fill='currentColor'
          className='IBMSMSMBSSCL_CAElementIcon'
        >
          <path d='M240.5 224H352C365.3 224 377.3 232.3 381.1 244.7C386.6 257.2 383.1 271.3 373.1 280.1L117.1 504.1C105.8 513.9 89.27 514.7 77.19 505.9C65.1 497.1 60.7 481.1 66.59 467.4L143.5 288H31.1C18.67 288 6.733 279.7 2.044 267.3C-2.645 254.8 .8944 240.7 10.93 231.9L266.9 7.918C278.2-1.92 294.7-2.669 306.8 6.114C318.9 14.9 323.3 30.87 317.4 44.61L240.5 224z'></path>
        </svg>
        <p className='IBMSMSMBSSCL_CAElementText'>
          {abbreviateNumber(totalZappedAmount)}
        </p>
        <div className='IBMSMSMBSSCL_CAElementLoadWrapper'>
          <div className='IBMSMSMBSSCL_CAElementLoad'></div>
        </div>
      </div>
      {isOpen && (
        <ZapPopUp
          title='Tip/Zap'
          receiver={props.pubkey}
          eventId={props.id}
          handleClose={() => setIsOpen(false)}
          setTotalZapAmount={setTotalZappedAmount}
          setHasZapped={setHasZapped}
        />
      )}
    </>
  )
}
