import { sortBy, partition, sum } from 'lodash' import { useEffect, useState } from 'react' import { FreeResponseContract, MultipleChoiceContract } from 'common/contract' import { Col } from '../layout/col' import { useUser } from 'web/hooks/use-user' import { getDpmOutcomeProbability } from 'common/calculate-dpm' import { useAnswers } from 'web/hooks/use-answers' import { tradingAllowed } from 'web/lib/firebase/contracts' import { AnswerItem } from './answer-item' import { CreateAnswerPanel } from './create-answer-panel' import { AnswerResolvePanel } from './answer-resolve-panel' import { Spacer } from '../layout/spacer' import { getOutcomeProbability } from 'common/calculate' import { Answer } from 'common/answer' import clsx from 'clsx' import { formatPercent } from 'common/util/format' import { Modal } from 'web/components/layout/modal' import { AnswerBetPanel } from 'web/components/answers/answer-bet-panel' import { Row } from 'web/components/layout/row' import { Avatar } from 'web/components/avatar' import { Linkify } from 'web/components/linkify' import { Button } from 'web/components/button' import { useAdmin } from 'web/hooks/use-admin' import { needsAdminToResolve } from 'web/pages/[username]/[contractSlug]' import { CATEGORY_COLORS } from '../charts/contract/choice' import { useChartAnswers } from '../charts/contract/choice' export function AnswersPanel(props: { contract: FreeResponseContract | MultipleChoiceContract }) { const isAdmin = useAdmin() const { contract } = props const { creatorId, resolution, resolutions, totalBets, outcomeType } = contract const [showAllAnswers, setShowAllAnswers] = useState(false) const answers = (useAnswers(contract.id) ?? contract.answers).filter( (a) => a.number != 0 || contract.outcomeType === 'MULTIPLE_CHOICE' ) const hasZeroBetAnswers = answers.some((answer) => totalBets[answer.id] < 1) const [winningAnswers, losingAnswers] = partition( answers.filter((a) => (showAllAnswers ? true : totalBets[a.id] > 0)), (answer) => answer.id === resolution || (resolutions && resolutions[answer.id]) ) const sortedAnswers = [ ...sortBy(winningAnswers, (answer) => resolutions ? -1 * resolutions[answer.id] : 0 ), ...sortBy( resolution ? [] : losingAnswers, (answer) => -1 * getDpmOutcomeProbability(contract.totalShares, answer.id) ), ] const answerItems = sortBy( losingAnswers.length > 0 ? losingAnswers : sortedAnswers, (answer) => -getOutcomeProbability(contract, answer.id) ) const user = useUser() const [resolveOption, setResolveOption] = useState< 'CHOOSE' | 'CHOOSE_MULTIPLE' | 'CANCEL' | undefined >() const [chosenAnswers, setChosenAnswers] = useState<{ [answerId: string]: number }>({}) const chosenTotal = sum(Object.values(chosenAnswers)) const onChoose = (answerId: string, prob: number) => { if (resolveOption === 'CHOOSE') { setChosenAnswers({ [answerId]: prob }) } else { setChosenAnswers((chosenAnswers) => { return { ...chosenAnswers, [answerId]: prob, } }) } } const onDeselect = (answerId: string) => { setChosenAnswers((chosenAnswers) => { const newChosenAnswers = { ...chosenAnswers } delete newChosenAnswers[answerId] return newChosenAnswers }) } useEffect(() => { setChosenAnswers({}) }, [resolveOption]) const showChoice = resolution ? undefined : resolveOption === 'CHOOSE' ? 'radio' : resolveOption === 'CHOOSE_MULTIPLE' ? 'checkbox' : undefined const colorSortedAnswer = useChartAnswers(contract).map( (value, _index) => value.text ) return (