import React from 'react';
import injectjss from 'react-jss';
import '@assets/scss/select-styles';

interface SelectTag {
	options: Object[],
	defaultOption?: Record<string, any>,
	name: string,
	componentStyles: Object,
	[propName: string]: any
}

interface SI {
	options?,
	name?,
	defaultOption?,
	componentStyles?
}

const Select: React.ComponentType<SelectTag> = ({ options, name, defaultOption, componentStyles }: SI) => {

	// const [ selected, setSelected ] = React.useState({name: 'Select A Value', value: ''});
	const [showing, setShowing] = React.useState(false);

	// const [ selectedOption, setSelectedOption ] = defaultOption ? React.useState<string | null>(defaultOption.value) : React.useState('');
	const [selectedOption, setSelectedOption] = React.useState<object | null>(defaultOption ? defaultOption.value : { name: 'Select An Option', value: '' });

	const handleClick = () =>
		showing ? setShowing(false) : setShowing(true);

	const setOption = e => {

		setSelectedOption({
			name: e.name,
			value: e.value
		});
		// setSelectedOption(e['value']);
	};

	return (<>
		<div style={componentStyles} data-value={selectedOption['value']} className='aweb-select'>
			<div className='cs-options-select' onClick={handleClick}>
				{selectedOption['name']}
			</div>
			<ul className={'cs-options-box ' + (showing ? 'showing' : '')}>
				{
					options.map((option: { [propName: string]: any }) => (
						<li
							className={option.value === selectedOption['value'] ? 'selected' : null}
							key={option.value}
							onClick={() => setOption({ name: option.name, value: option.value })}>
							{option.name}
						</li>
					))
				}
			</ul>
		</div>
	</>);
};

export default Select;