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

import BaseListItem from 'react-uikit/list-item/templates/base'

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

const SearchBondIssuerItem = ({item, isSelected, nodeRef, onClick}) => {
    const click = () => {
        // Search autocomplete requires item to have a value prop
        // to complete the search bar when clicked – we will use the
        // stock name as the value.
        // onClick && onClick({...item, value: item.id, label: item.name})
        onClick && onClick(item)
    }

    const rootClassNames = bem.classNames('c-search-bond-issuer-item')
    const nameClassNames = bem.classNames('c-search-bond-issuer-item__name')
    const tickerClassNames = bem.classNames('c-search-bond-issuer-item__ticker')

    return (
        <BaseListItem
            className={rootClassNames}
            isSelected={isSelected}
            item={item}
            nodeRef={nodeRef}
            value={item.id}
            onClick={click}
        >
            <span className={tickerClassNames}>{item.id}</span>
            <span className={nameClassNames} title={item.name}>
                {item.name}
            </span>
        </BaseListItem>
    )
}

SearchBondIssuerItem.propTypes = {
    isSelected: PropTypes.bool,
    item: PropTypes.shape({
        id: PropTypes.string,
        name: PropTypes.string,
        value: PropTypes.string,
    }),
    nodeRef: PropTypes.func,
    onClick: PropTypes.func,
}

export default SearchBondIssuerItem