import {ThumbUpIcon} from '@common/icons/material/ThumbUp';
import {ThumbDownIcon} from '@common/icons/material/ThumbDown';
import {VotableModel} from '@common/votes/votable-model';
import {Button} from '@common/ui/buttons/button';
import {useStoreVote} from '@common/votes/requests/use-store-vote';
import {useState} from 'react';
import {FormattedNumber} from '@common/i18n/formatted-number';
import clsx from 'clsx';

interface Props {
  model: VotableModel;
  className?: string;
  showUpvotesOnly?: boolean;
}
export function ThumbButtons({model, className, showUpvotesOnly}: Props) {
  const changeVote = useStoreVote(model);

  const [upvotes, setUpvotes] = useState(model.upvotes || 0);
  const [downvotes, setDownvotes] = useState(model.downvotes || 0);
  const [currentVote, setCurrentVote] = useState(model.current_vote);

  const syncLocalState = (model: VotableModel) => {
    setUpvotes(model.upvotes);
    setDownvotes(model.downvotes);
    setCurrentVote(model.current_vote);
  };

  return (
    <div className={clsx(className, 'whitespace-nowrap')}>
      <Button
        className="gap-6"
        sizeClassName="px-8 py-4"
        color={currentVote === 'upvote' ? 'primary' : undefined}
        disabled={changeVote.isPending}
        aria-label="Upvote"
        onClick={() => {
          changeVote.mutate(
            {voteType: 'upvote'},
            {
              onSuccess: response => syncLocalState(response.model),
            },
          );
        }}
      >
        <ThumbUpIcon />
        <div>
          <FormattedNumber value={upvotes} />
        </div>
      </Button>
      {!showUpvotesOnly && (
        <Button
          className="gap-6"
          sizeClassName="px-8 py-4"
          color={currentVote === 'downvote' ? 'primary' : undefined}
          disabled={changeVote.isPending}
          aria-label="Downvote"
          onClick={() => {
            changeVote.mutate(
              {voteType: 'downvote'},
              {
                onSuccess: response => syncLocalState(response.model),
              },
            );
          }}
        >
          <ThumbDownIcon />
          <div>
            <FormattedNumber value={downvotes} />
          </div>
        </Button>
      )}
    </div>
  );
}