import UpBolt from '@/svgs/bolt.svg'
import styles from './upvote.module.css'
import { gql, useMutation } from '@apollo/client'
import ActionTooltip from './action-tooltip'
import ItemAct, { useAct, useZap } from './item-act'
import { useMe } from './me'
import getColor from '@/lib/rainbow'
import { useCallback, useMemo, useRef, useState } from 'react'
import LongPressable from './long-pressable'
import Overlay from 'react-bootstrap/Overlay'
import Popover from 'react-bootstrap/Popover'
import { useShowModal } from './modal'
import { numWithUnits } from '@/lib/format'
import { Dropdown } from 'react-bootstrap'
const UpvotePopover = ({ target, show, handleClose }) => {
const me = useMe()
return (
Zapping
Press the bolt again to zap {me?.privates?.tipDefault || 1} more sat{me?.privates?.tipDefault > 1 ? 's' : ''}.
Repeatedly press the bolt to zap more sats.
)
}
const TipPopover = ({ target, show, handleClose }) => (
Press and hold
Press and hold bolt to zap a custom amount.
As you zap more, the bolt color follows the rainbow.
)
export function DropdownItemUpVote ({ item }) {
const showModal = useShowModal()
return (
{
showModal(onClose =>
)
}}
>
zap
)
}
export const nextTip = (meSats, { tipDefault, turboTipping }) => {
// what should our next tip be?
if (!turboTipping) return (tipDefault || 1)
let sats = tipDefault || 1
if (turboTipping) {
while (meSats >= sats) {
sats *= 10
}
// deduct current sats since turbo tipping is about total zap not making the next zap 10x
sats -= meSats
}
return sats
}
export default function UpVote ({ item, className }) {
const showModal = useShowModal()
const [voteShow, _setVoteShow] = useState(false)
const [tipShow, _setTipShow] = useState(false)
const ref = useRef()
const me = useMe()
const [hover, setHover] = useState(false)
const [setWalkthrough] = useMutation(
gql`
mutation setWalkthrough($upvotePopover: Boolean, $tipPopover: Boolean) {
setWalkthrough(upvotePopover: $upvotePopover, tipPopover: $tipPopover)
}`
)
const setVoteShow = useCallback((yes) => {
if (!me) return
// if they haven't seen the walkthrough and they have sats
if (yes && !me.privates?.upvotePopover && me.privates?.sats) {
_setVoteShow(true)
}
if (voteShow && !yes) {
_setVoteShow(false)
setWalkthrough({ variables: { upvotePopover: true } })
}
}, [me, voteShow, setWalkthrough])
const setTipShow = useCallback((yes) => {
if (!me) return
// if we want to show it, yet we still haven't shown
if (yes && !me.privates?.tipPopover && me.privates?.sats) {
_setTipShow(true)
}
// if it's currently showing and we want to hide it
if (tipShow && !yes) {
_setTipShow(false)
setWalkthrough({ variables: { tipPopover: true } })
}
}, [me, tipShow, setWalkthrough])
const [act] = useAct()
const zap = useZap()
const disabled = useMemo(() => item?.mine || item?.meForward || item?.deletedAt,
[item?.mine, item?.meForward, item?.deletedAt])
const [meSats, overlayText, color, nextColor] = useMemo(() => {
const meSats = (item?.meSats || item?.meAnonSats || 0)
// what should our next tip be?
const sats = nextTip(meSats, { ...me?.privates })
return [
meSats, me ? numWithUnits(sats, { abbreviate: false }) : 'zap it',
getColor(meSats), getColor(meSats + sats)]
}, [item?.meSats, item?.meAnonSats, me?.privates?.tipDefault, me?.privates?.turboDefault])
const handleModalClosed = () => {
setHover(false)
}
const handleLongPress = (e) => {
if (!item) return
// we can't tip ourselves
if (disabled) {
return
}
setTipShow(false)
showModal(onClose =>
, { onClose: handleModalClosed })
}
const handleShortPress = () => {
if (me) {
if (!item) return
// we can't tip ourselves
if (disabled) {
return
}
if (meSats) {
setVoteShow(false)
} else {
setTipShow(true)
}
zap({ item, me })
} else {
showModal(onClose => , { onClose: handleModalClosed })
}
}
const fillColor = hover ? nextColor : color
return (
setHover(true)}
onMouseLeave={() => setHover(false)}
onTouchEnd={() => setHover(false)}
width={26}
height={26}
className={
`${styles.upvote}
${className || ''}
${disabled ? styles.noSelfTips : ''}
${meSats ? styles.voted : ''}`
}
style={meSats || hover
? {
fill: fillColor,
filter: `drop-shadow(0 0 6px ${fillColor}90)`
}
: undefined}
/>
setTipShow(false)} />
setVoteShow(false)} />
)
}