import { createElement, Component } from '@wordpress/element'
import { maybeTransformUnorderedChoices } from '../helpers/parse-choices.js'
import Downshift from 'downshift'
import classnames from 'classnames'

const Select = ({ value, option: { choices, placeholder }, onChange }) => {
	const orderedChoices = maybeTransformUnorderedChoices(choices)

	return (
		<Downshift
			selectedItem={value}
			onChange={selection => onChange(selection)}
			itemToString={item =>
				item ? orderedChoices.find(({ key }) => key === item).value : ''
			}>
			{({
				getInputProps,
				getItemProps,
				getLabelProps,
				getMenuProps,
				isOpen,
				inputValue,
				highlightedIndex,
				selectedItem,
				openMenu
			}) => (
				<div className="ct-select-input">
					<input
						{...getInputProps({
							onFocus: () => openMenu(),
							onClick: () => openMenu()
						})}
						placeholder={placeholder || 'Select value...'}
						readOnly
					/>

					{isOpen && (
						<div
							{...getMenuProps({
								className: 'ct-select-dropdown'
							})}>
							{orderedChoices.map((item, index) => (
								<div
									{...getItemProps({
										key: item.key,
										index,
										item: item.key,
										className: classnames(
											'ct-select-dropdown-item',
											{
												active:
													highlightedIndex === index,
												selected:
													selectedItem === item.key
											}
										)
									})}>
									{item.value}
								</div>
							))}
						</div>
					)}
				</div>
			)}
		</Downshift>
	)
}

export default Select