import React from 'react'
import PropTypes from 'prop-types'
import Search from 'react-uikit/search'
import SearchInput from 'react-uikit/search-input'
import SearchStockItem from 'components/list-items/search-stock'
import SearchErrorItem from 'components/list-items/search-error'
import SearchNotFoundItem from 'components/list-items/search-not-found'
import routes from 'global/constants/routes'
import searchKeys from 'global/constants/search-keys'
import BEMModule from 'utils/bem'
import {history} from 'router/history'
import styles from './styles.scss'

const bem = new BEMModule(styles)

class GlobalSearch extends React.PureComponent {
    get itemTemplate() {
        const {isEmpty, isError, isLoading, query} = this.props

        if (isLoading) {
            return null
        }

        if (isError) {
            return SearchErrorItem
        }

        if (isEmpty && query !== '') {
            return SearchNotFoundItem
        }

        return SearchStockItem
    }

    change = (query, options) => {
        this.props.updateSearch &&
            this.props.updateSearch(
                {
                    query,
                    searchKey: searchKeys.GLOBAL,
                },
                options
            )
    }

    submit = ({id}) => {
        history.push(`${routes.SEARCH}?securityId=${id}`)
    }

    render() {
        const {autoFocus, isLoading, query, suggestions, ...props} = this.props
        const classes = bem.classNames('c-global-search')
        const suggestionsClasses = bem.classNames(
            'c-global-search__suggestions'
        )
        const itemTemplate = this.itemTemplate

        return (
            <Search
                className={classes}
                isLoading={isLoading}
                placeholder="Enter a stock or company"
                value={query}
                onChange={this.change}
                {...props}
            >
                <Search.Input
                    fillSpace
                    placeholder="Enter a company name or stock symbol..."
                    render={SearchInput}
                />

                {!isLoading && (
                    <Search.Suggestions
                        className={suggestionsClasses}
                        itemTemplate={itemTemplate}
                        suggestions={suggestions}
                        onItemSelect={this.submit}
                    />
                )}
            </Search>
        )
    }
}

GlobalSearch.propTypes = {
    autoFocus: PropTypes.bool,
    isEmpty: PropTypes.bool,
    isError: PropTypes.bool,
    isLoading: PropTypes.bool,
    isOpen: PropTypes.bool,
    query: PropTypes.string,
    suggestions: PropTypes.array,
    updateSearch: PropTypes.func,
}

GlobalSearch.defaultProps = {
    query: '',
}

export default GlobalSearch