import React, {useEffect, useState} from 'react'
import PropTypes from 'prop-types'
import LogRocket from 'logrocket'
import BEMModule from 'utils/bem'
import policies from 'global/constants/policies'

import Icon from 'react-uikit/icon'

import styles from './styles.scss'
const bem = new BEMModule(styles)

const UpvoteButton = ({
    className,
    deleteRationaleUpvote,
    isLightTheme,
    policy,
    rationale,
    submitRationaleUpvote,
    user,
    votes: previousVotes = 0,
}) => {
    const {
        canUpvote,
        reason: {canUpvote: reason},
    } = policy.forPost(rationale)
    const isRationaleOwner = reason === policies.post.RATIONALE_UPVOTE_OWNER
    const [hasVoted, setHasVoted] = useState(false)
    const [hasRequestErrored, setHasRequestErrored] = useState(false)
    const [votes, setVotes] = useState(previousVotes)
    const disabled = !canUpvote || !rationale || hasRequestErrored

    const handleClick = (e) => {
        e.stopPropagation()
        LogRocket.track('Upvote Order')
        setHasVoted((prevVoteVal) => !prevVoteVal)

        const payload = {messageId: rationale.id}

        if (!hasVoted) {
            submitRationaleUpvote?.(payload)
                .then(() => {
                    setHasVoted(true)
                    setVotes((previousAmount) => previousAmount + 1)
                })
                .catch((err) => {
                    setHasRequestErrored(true)
                    LogRocket.captureException(err, {
                        extra: {rationaleId: rationale?.id},
                    })
                })
        } else {
            deleteRationaleUpvote?.(payload)
                .then(() => {
                    setHasVoted(false)
                    setVotes((previousAmount) => previousAmount - 1)
                })
                .catch((err) => {
                    setHasRequestErrored(true)
                    LogRocket.captureException(err, {
                        extra: {rationaleId: rationale?.id},
                    })
                })
        }
    }

    useEffect(() => {
        if (Array.isArray(rationale?.votes)) {
            setHasVoted(rationale.votes.includes(user.id))
        }
    }, [rationale?.users?.length, user?.id])

    const classes = bem.classNames('c-upvote-button', className, {
        light: isLightTheme,
        disabled,
    })
    const iconClasses = bem.classNames('c-upvote-button__icon')
    const valueClasses = bem.classNames('c-upvote-button__value')

    return (
        <button className={classes} disabled={disabled} onClick={handleClick}>
            {!isRationaleOwner && (
                <Icon className={iconClasses} name="upvote" />
            )}
            <span className={valueClasses}>{votes}</span>
            <br />
            Upvote{isRationaleOwner && 's'}
            {hasVoted && 'd'}
        </button>
    )
}

UpvoteButton.propTypes = {
    className: PropTypes.string,
    deleteRationaleUpvote: PropTypes.func,
    isLightTheme: PropTypes.bool,
    policy: PropTypes.object,
    rationale: PropTypes.object,
    submitRationaleUpvote: PropTypes.func,
    user: PropTypes.object,
    votes: PropTypes.number,
}

export default UpvoteButton