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

import Button from 'react-uikit/button'
import Icon from 'react-uikit/icon'

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

const TradeFilterPill = ({className, filter, value, onRemove, onOpen}) => {
    const rootClassNames = bem.classNames('c-trade-filter-pill', className)
    const typeClassNames = bem.classNames('c-trade-filter-pill__type')
    const valueClassNames = bem.classNames('c-trade-filter-pill__value')
    const removeButtonClassNames = bem.classNames(
        'c-trade-filter-pill__remove-button'
    )
    const removeIconClassNames = bem.classNames(
        'c-trade-filter-pill__remove-icon'
    )

    const handleOpen = () => onOpen && onOpen(filter)
    const handleRemove = () => onRemove && onRemove(filter.value)

    return (
        <section className={rootClassNames} title={value}>
            <div onClick={handleOpen}>
                <h3 className={typeClassNames}>{filter.label}</h3>
                {value.length ? (
                    <p className={valueClassNames}>{value}</p>
                ) : null}
            </div>
            <div>
                <Button
                    className={removeButtonClassNames}
                    onClick={handleRemove}
                    title={`Remove ${filter.label} filter.`}
                >
                    <Icon name="close" className={removeIconClassNames} />
                </Button>
            </div>
        </section>
    )
}

TradeFilterPill.propTypes = {
    className: PropTypes.string,
    filter: PropTypes.shape({
        label: PropTypes.string,
        value: PropTypes.string,
    }),
    value: PropTypes.string,
    onOpen: PropTypes.func,
    onRemove: PropTypes.func,
}

export default TradeFilterPill