import React from 'react'
import PropTypes from 'prop-types'
import {uuid} from 'common-fe/utils'

import Button from 'react-uikit/button'
import Icon from 'react-uikit/icon'
import Tooltip from 'react-uikit/tooltip'
import {history} from 'router/history'
import routes from 'global/constants/routes'

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

class TradeButton extends React.PureComponent {
    id = `trade-button __${uuid()}`

    click = (e) => {
        if (this.props.disabled) {
            return
        }

        if (this.props.isLocked) {
            history.push(routes.PAYMENT)
            return
        }

        e.preventDefault()
        e.stopPropagation()

        this.props.onClick && this.props.onClick()
    }

    render() {
        const {className, disabled, isLocked, tooltip} = this.props

        const classes = bem.classNames('c-trade-button', {disabled})
        const iconClasses = bem.classNames('c-trade-button__icon')
        const tooltipClasses = bem.classNames('c-trade-button__tooltip')
        const buttonText = isLocked ? 'Unlock' : 'Trade'
        const buttonIcon = isLocked ? 'lock' : 'trade'

        return (
            <span
                className={className}
                data-tip=""
                data-for={this.id}
                onClick={this.click}
            >
                <Button
                    className={classes}
                    disabled={disabled}
                    isOutline
                    size="small"
                    title="Trade"
                    onClick={this.click}
                >
                    <Icon className={iconClasses} name={buttonIcon} />
                    {buttonText}
                </Button>

                {tooltip ? (
                    <Tooltip className={tooltipClasses} id={this.id}>
                        <p>{tooltip}</p>
                    </Tooltip>
                ) : null}
            </span>
        )
    }
}

TradeButton.propTypes = {
    className: PropTypes.string,
    disabled: PropTypes.bool,
    isLocked: PropTypes.bool,
    tooltip: PropTypes.string,
    onClick: PropTypes.func,
}

export default TradeButton