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 ticker as the displayed value.
        onClick && onClick({...item, label: item.ticker, value: item.ticker})
    }

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

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

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

export default SearchBondIssuerItem