import React from 'react'
import PropTypes from 'prop-types'

import Pill from 'react-uikit/tag'

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

const ColumnLongShort = ({
    align,
    className,
    rootClassName,
    position,
    tag: Tag,
}) => {
    const rootClassNames = bem.classNames(
        'c-column-long-short',
        rootClassName,
        {
            [align]: true,
        }
    )
    const wrapperClassNames = bem.classNames(
        'c-column-long-short__wrapper',
        className
    )

    let variant = 'neutral'
    if (position === 'short') {
        variant = 'danger'
    }
    if (position === 'long') {
        variant = 'success'
    }

    return (
        <Tag className={rootClassNames}>
            <div className={wrapperClassNames}>
                <Pill variant={variant} title={position} isFilled>
                    {position ? position : '– –'}
                </Pill>
            </div>
        </Tag>
    )
}

ColumnLongShort.propTypes = {
    align: PropTypes.string,
    className: PropTypes.string,
    position: PropTypes.string,
    rootClassName: PropTypes.string,
    tag: PropTypes.string,
}

ColumnLongShort.defaultProps = {
    align: 'center',
    tag: 'td',
}

export default React.memo(ColumnLongShort)