import { compose } from 'ramda'
import React, { Component } from 'react'
import emoji from 'react-easy-emoji'
import { Trans, withTranslation } from 'react-i18next'
import { connect } from 'react-redux'
import { flatRulesSelector } from 'Selectors/analyseSelectors'
import Overlay from './Overlay'
import SearchBar from './SearchBar'

export default compose(
	connect(state => ({
		flatRules: flatRulesSelector(state)
	})),
	withTranslation()
)(
	class SearchButton extends Component {
		componentDidMount() {
			// removeEventListener will need the exact same function instance
			this.boundHandleKeyDown = this.handleKeyDown.bind(this)

			window.addEventListener('keydown', this.boundHandleKeyDown)
		}
		handleKeyDown(e) {
			if (!(e.ctrlKey && e.key === 'k')) return
			this.setState({ visible: true })
			e.preventDefault()
			e.stopPropagation()
			return false
		}
		componentWillUnmount() {
			window.removeEventListener('keydown', this.boundHandleKeyDown)
		}
		state = {
			visible: false
		}
		close = () => this.setState({ visible: false })
		render() {
			let { flatRules } = this.props
			return this.state.visible ? (
				<Overlay onClose={this.close}>
					<h2>
						<Trans>Chercher dans la documentation</Trans>
					</h2>
					<SearchBar
						showDefaultList={false}
						finally={this.close}
						rules={flatRules}
					/>
				</Overlay>
			) : (
				<button
					className="ui__ simple small button"
					onClick={() => this.setState({ visible: true })}>
					{emoji('🔍')} <Trans>Rechercher</Trans>
				</button>
			)
		}
	}
)