import { Fragment } from '@wordpress/element';
import { Listbox, Transition } from '@headlessui/react';
import './Select.scss';
import PremiumBadge from '../partials/premium-badge';

/**
 * A reusable styled Select component supporting flat options and option groups.
 * @param {object} props - Props: options (array), selected (object), setSelected (function)
 */
const Select = ({ options, selected, setSelected, placeholder = 'Select an option', variantClass = '', className = '' }) => {

	const renderOption = (option) => {
		const disabled = option.disabled ?? false;
		return (
			<Listbox.Option
				key={option.value}
				disabled={disabled}
				className={({ active }) => `adpresso-select-option ${active ? 'is-active' : ''} ${variantClass}`}
				value={option}
			>
				{({ selected: isSelected }) => (
					<>
                <span className={`adpresso-select-option-label ${isSelected ? 'is-selected' : ''}`}>
                   {option.label}
                </span>
						{isSelected ? (
							<span className="adpresso-select-option-indicator">
                      {/*<CheckIcon aria-hidden="true" />*/}
                   </span>
						) : null}
					</>
				)}
			</Listbox.Option>
		);
	}

	return (
		<Listbox value={selected} onChange={setSelected}>
			<div className={`adpresso-select-container ${className}`}>
				<Listbox.Button className={`adpresso-select-button ${variantClass}`}>
					<span className="adpresso-select-label">{selected ? selected.label : placeholder}</span>
					<span className={`adpresso-select-icon ${variantClass}`}>
                   {/*<ChevronUpDownIcon aria-hidden="true" />*/}
                </span>
				</Listbox.Button>

				<Transition
					as={Fragment}
					leave="transition ease-in duration-100"
					leaveFrom="opacity-100"
					leaveTo="opacity-0"
				>
					<Listbox.Options className={`adpresso-select-options ${variantClass}`}>
						{options.map((item, index) => {
							if (item.options && Array.isArray(item.options)) {
								return (
									<div key={`group-${index}`} className="adpresso-select-group">
										<div className={`adpresso-select-group-header ${item.label === 'Pro' ? 'is-premium' : ''}`}>
											{item.label === 'Pro' ? <PremiumBadge /> : item.label}
										</div>
										<div className="adpresso-select-group-items">
											{item.options.map(renderOption)}
										</div>
									</div>
								);
							}

							return renderOption(item);
						})}
					</Listbox.Options>
				</Transition>
			</div>
		</Listbox>
	);
};

export default Select;