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 BEMModule from 'utils/bem'
import styles from './styles.scss'
const bem = new BEMModule(styles)

class ExerciseButton extends React.PureComponent {
    id = `exchange-button__${uuid()}`

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

        e.preventDefault()
        e.stopPropagation()

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

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

        const classes = bem.classNames('c-exchange-button', {disabled})
        const iconClasses = bem.classNames('c-exchange-button__icon')
        const tooltipClasses = bem.classNames('c-exchange-button__tooltip')

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

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

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

export default ExerciseButton