import {
	BaseControl,
	Button,
	ButtonGroup,
	__experimentalToggleGroupControl as ExperimentalToggleGroupControl,
	__experimentalToggleGroupControlOption as ExperimentalToggleGroupControlOption,
	__experimentalToggleGroupControlOptionIcon as ExperimentalToggleGroupControlOptionIcon,
	ToggleGroupControl as StableToggleGroupControl,
	ToggleGroupControlOption as StableToggleGroupControlOption,
	ToggleGroupControlOptionIcon as StableToggleGroupControlOptionIcon,
} from '@wordpress/components';
import classnames from 'classnames/dedupe';

const ToggleGroupControl =
	StableToggleGroupControl || ExperimentalToggleGroupControl;
const ToggleGroupControlOption =
	StableToggleGroupControlOption || ExperimentalToggleGroupControlOption;
const ToggleGroupControlOptionIcon =
	StableToggleGroupControlOptionIcon ||
	ExperimentalToggleGroupControlOptionIcon ||
	ToggleGroupControlOption;

/**
 * Component Class
 *
 * @param props
 */
export default function ToggleGroup(props) {
	const {
		label,
		value,
		options,
		onChange,
		isBlock,
		isAdaptiveWidth,
		isDeselectable,
	} = props;

	if (ToggleGroupControl && ToggleGroupControlOption) {
		return (
			<BaseControl
				id={label}
				label={label}
				className={classnames(
					'ghostkit-control-toggle-group',
					props.className
				)}
			>
				<ToggleGroupControl
					value={value}
					onChange={onChange}
					isBlock={isBlock}
					isAdaptiveWidth={isAdaptiveWidth}
					isDeselectable={isDeselectable}
					hideLabelFromVision
				>
					{options.map((option) =>
						option.icon ? (
							<ToggleGroupControlOptionIcon
								key={option.value}
								value={option.value}
								icon={option.icon}
								label={option.label}
								disabled={option.disabled}
							/>
						) : (
							<ToggleGroupControlOption
								key={option.value}
								value={option.value}
								label={option.label}
								disabled={option.disabled}
							/>
						)
					)}
				</ToggleGroupControl>
			</BaseControl>
		);
	}

	// Fallback.
	return (
		<BaseControl id={label} label={label}>
			<ButtonGroup className="ghostkit-control-toggle-group">
				{options.map((option) => (
					<Button
						key={option.value}
						variant={value === option.value ? 'primary' : ''}
						isPressed={value === option.value}
						disabled={option.disabled}
						onClick={() => {
							onChange(option.value);
						}}
					>
						{option.label}
					</Button>
				))}
			</ButtonGroup>
		</BaseControl>
	);
}