import { memo } from '@wordpress/element';
import { ALL_DEVICE_DATA } from './Constants';

import {
	Dashicon
} from '@wordpress/components';

import { usePreviewedDevice } from '../_hooks';
import { IconKey } from '@wordpress/components/build-types/dashicon/types.js';

type Device = 'desktop' | 'tablet' | 'mobile';

const getDeviceIcon = (device: Device, size: number) => {
	const icon  = [
		{name: 'desktop', iconName: 'desktop'},
		{name: 'tablet', iconName: 'tablet'},
		{name: 'mobile', iconName: 'smartphone'},
	].filter(i => i.name === device);
	if (icon.length === 0) return '';

	return (
		<Dashicon
			className='apura-device-icon'
			size={size}
			icon={icon[0].iconName as IconKey}
		/>
	);
}

type Props = {
	devices: {label: string, device: Device}[],
	size?: number
};

const DeviceControl = memo(function DeviceControl({devices, size=15}: Props) {
	const { previewedDevice, setPreviewedDevice, handleDeviceClick } = usePreviewedDevice();
	// console.log('deviceControl!');

	return (
		<div className="apura-device-control">
			{devices.length > 1 && devices.map((item, i) => (
				<button
					type='button'
					className='apura-device-control__button'
					key={i}
					aria-pressed={previewedDevice === item.device}
					aria-label={item.label}
					title={item.label}
					onClick={() => handleDeviceClick(item.device)}
				>
					{getDeviceIcon(item.device, size)}
				</button>
				))
			}
		</div>
	);
});

export default DeviceControl;