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)

const types = ['cancel', 'aborted']

const ColumnButton = ({type, disabled, className, tooltip, onClick}) => {
    const rootClassNames = bem.classNames('c-column-button', className)
    const buttonClassNames = bem.classNames('c-column-button__button', {
        disabled,
        [type]: true,
    })
    const iconclassNames = bem.classNames('c-column-button__icon', className)
    const tooltipclassNames = bem.classNames(
        'c-column-button__tooltip',
        className
    )

    const getLabel = (type) => {
        switch (type) {
            case 'cancel': {
                return {label: 'cancel', iconName: 'close'}
            }
            case 'aborted': {
                return {label: 'aborted'}
            }
            default: {
                return {label: ''}
            }
        }
    }

    const {label, iconName} = getLabel(type)

    const id = tooltip ? `${label}-button__${uuid()}` : ''

    if (!types.includes(type) || !onClick) {
        return <td className={rootClassNames}>&nbsp;</td>
    }

    return (
        <td className={rootClassNames}>
            <span data-tip="" data-for={id}>
                <Button
                    className={buttonClassNames}
                    disabled={disabled}
                    isOutline
                    size="small"
                    title={label}
                    onClick={onClick}
                >
                    {iconName && (
                        <Icon className={iconclassNames} name={iconName} />
                    )}
                    {label}
                </Button>

                {tooltip ? (
                    <Tooltip className={tooltipclassNames} id={id}>
                        <p>{tooltip}</p>
                    </Tooltip>
                ) : null}
            </span>
        </td>
    )
}

ColumnButton.propTypes = {
    className: PropTypes.string,
    disabled: PropTypes.bool,
    securityType: PropTypes.string,
    tooltip: PropTypes.string,
    type: PropTypes.oneOf(types),
    onClick: PropTypes.func,
}

export default React.memo(ColumnButton)