import React from 'react'
import PropTypes from 'prop-types'
import styles from './styles.scss'
import BEMModule from 'utils/bem'

import {Button, Icon} from '@equitysim/react-uikit'

const bem = new BEMModule(styles)

const DisabledMessage = ({message}) => (
    <p
        style={{
            backgroundColor: 'white',
            color: 'grey',
            padding: '0.8rem',
            position: 'absolute',
            width: '75%',
            borderRadius: '2px',
            zIndex: '100',
            margin: 0,
        }}
    >
        {message}
    </p>
)

DisabledMessage.propTypes = {
    message: PropTypes.string,
}

const CreatePortfolioThumbnail = ({disabled, message, onClick}) => {
    const handleClick = () => {
        !disabled && onClick()
    }

    const classes = bem.classNames('c-create-portfolio-thumbnail')
    const iconClasses = bem.classNames('c-create-portfolio-thumbnail__icon', {
        disabled,
    })

    return (
        <Button
            className={classes}
            disabled={disabled}
            onClick={handleClick}
            style={{position: 'relative'}}
        >
            <Icon className={iconClasses} name="add" />
            {disabled && message && <DisabledMessage message={message} />}
        </Button>
    )
}

CreatePortfolioThumbnail.propTypes = {
    disabled: PropTypes.bool,
    message: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
    onClick: PropTypes.func,
}

export default CreatePortfolioThumbnail