import React, {useMemo} from 'react'
import PropTypes from 'prop-types'
import Tooltip from 'react-uikit/tooltip'
import {uuid} from 'common-fe/utils'
import BEMModule from 'utils/bem'
import styles from './styles.scss'

const bem = new BEMModule(styles)

const JumpToRank = ({className, hasRank, onClick}) => {
    const classes = bem.classNames('c-jump-to-my-rank', className, {
        disabled: !hasRank,
    })
    const linkClasses = bem.classNames('c-jump-to-my-rank__link')
    const tooltipClasses = bem.classNames('c-jump-to-my-rank__tooltip')
    const tooltip = hasRank ? '' : 'You currently do not have a ranking.'
    const id = useMemo(() => `tooltip-${uuid()}`, [])

    return (
        <span data-tip="" data-for={id}>
            <a className={classes} onClick={onClick}>
                Jump to my ranking
            </a>
            {tooltip ? (
                <Tooltip
                    className={tooltipClasses}
                    delayHide={500}
                    id={id}
                    isAnchored
                >
                    <p>
                        {tooltip}{' '}
                        <a
                            className={linkClasses}
                            href="https://#useTheForceLink"
                        >
                            Find out why?
                        </a>
                    </p>
                </Tooltip>
            ) : null}
        </span>
    )
}

JumpToRank.propTypes = {
    className: PropTypes.string,
    hasRank: PropTypes.bool,
    tooltip: PropTypes.string,
    onClick: PropTypes.func,
}

export default React.memo(JumpToRank)