import clsx from 'clsx'
import _ from 'lodash'
import { ClockIcon, DatabaseIcon, PencilIcon } from '@heroicons/react/outline'
import { TrendingUpIcon } from '@heroicons/react/solid'
import { Row } from '../layout/row'
import { formatMoney } from 'common/util/format'
import { UserLink } from '../user-page'
import {
Contract,
contractMetrics,
updateContract,
} from 'web/lib/firebase/contracts'
import { Col } from '../layout/col'
import dayjs from 'dayjs'
import { DateTimeTooltip } from '../datetime-tooltip'
import { fromNow } from 'web/lib/util/time'
import { Avatar } from '../avatar'
import { useState } from 'react'
import { ContractInfoDialog } from './contract-info-dialog'
import { Bet } from 'common/bet'
import NewContractBadge from '../new-contract-badge'
export function AbbrContractDetails(props: {
contract: Contract
showHotVolume?: boolean
showCloseTime?: boolean
}) {
const { contract, showHotVolume, showCloseTime } = props
const { volume, volume24Hours, creatorName, creatorUsername, closeTime } =
contract
const { volumeLabel } = contractMetrics(contract)
return (
{showHotVolume ? (
{formatMoney(volume24Hours)}
) : showCloseTime ? (
{(closeTime || 0) < Date.now() ? 'Closed' : 'Closes'}{' '}
{fromNow(closeTime || 0)}
) : volume > 0 ? (
{volumeLabel}
) : (
)}
)
}
export function ContractDetails(props: {
contract: Contract
bets: Bet[]
isCreator?: boolean
hideShareButtons?: boolean
}) {
const { contract, bets, isCreator, hideShareButtons } = props
const { closeTime, creatorName, creatorUsername } = contract
const { volumeLabel, createdDate, resolvedDate } = contractMetrics(contract)
return (
{(!!closeTime || !!resolvedDate) && (
{/*
{createdDate}
*/}
{resolvedDate && contract.resolutionTime ? (
<>
{/* {' - '} */}
{resolvedDate}
>
) : null}
{!resolvedDate && closeTime && (
<>
{/* {' - '}{' '} */}
>
)}
)}
{volumeLabel}
{!hideShareButtons && (
)}
)
}
// String version of the above, to send to the OpenGraph image generator
export function contractTextDetails(contract: Contract) {
const { closeTime, tags } = contract
const { createdDate, resolvedDate, volumeLabel } = contractMetrics(contract)
const hashtags = tags.map((tag) => `#${tag}`)
return (
`${resolvedDate ? `${createdDate} - ${resolvedDate}` : createdDate}` +
(closeTime
? ` • ${closeTime > Date.now() ? 'Closes' : 'Closed'} ${dayjs(
closeTime
).format('MMM D, h:mma')}`
: '') +
` • ${volumeLabel}` +
(hashtags.length > 0 ? ` • ${hashtags.join(' ')}` : '')
)
}
function EditableCloseDate(props: {
closeTime: number
contract: Contract
isCreator: boolean
}) {
const { closeTime, contract, isCreator } = props
const [isEditingCloseTime, setIsEditingCloseTime] = useState(false)
const [closeDate, setCloseDate] = useState(
closeTime && dayjs(closeTime).format('YYYY-MM-DDT23:59')
)
const isSameYear = dayjs(closeTime).isSame(dayjs(), 'year')
const isSameDay = dayjs(closeTime).isSame(dayjs(), 'day')
const onSave = () => {
const newCloseTime = dayjs(closeDate).valueOf()
if (newCloseTime === closeTime) setIsEditingCloseTime(false)
else if (newCloseTime > Date.now()) {
const { description } = contract
const formattedCloseDate = dayjs(newCloseTime).format('YYYY-MM-DD h:mm a')
const newDescription = `${description}\n\nClose date updated to ${formattedCloseDate}`
updateContract(contract.id, {
closeTime: newCloseTime,
description: newDescription,
})
setIsEditingCloseTime(false)
}
}
return (
<>
{isEditingCloseTime ? (
e.stopPropagation()}
onChange={(e) => setCloseDate(e.target.value || '')}
min={Date.now()}
value={closeDate}
/>
) : (
Date.now() ? 'Trading ends:' : 'Trading ended:'}
time={closeTime}
>
{isSameYear
? dayjs(closeTime).format('MMM D')
: dayjs(closeTime).format('MMM D, YYYY')}
{isSameDay && <> ({fromNow(closeTime)})>}
)}
{isCreator &&
(isEditingCloseTime ? (
) : (
))}
>
)
}