import React, { ComponentElement, ReactComponentElement, ReactElement, ReactNode } from 'react';
import { Wrapper, ToggleSwitch, Flex, WrapperProps } from 'dot-design-system';
import { IframeType } from 'dot-utils';
import Bolt from '../assets/bolt';
import CircleIcon from '../elements/CircleIcon';
import Code from '../assets/code';

interface Props {
	selectedFormat: IframeType[];
	onFormatChange: (format: IframeType) => void;
}

const formatLabels: { [Item in IframeType]: string } = {
	[IframeType.Website]: 'Website',
	[IframeType.Amp]: 'AMP',
};

const formatIcons: { [Item in IframeType]: (props: WrapperProps) => JSX.Element } = {
	[IframeType.Website]: (props) => <Code {...props} />,
	[IframeType.Amp]: (props) => <Bolt {...props} />,
};

function PlacementSelectFormat({ selectedFormat, onFormatChange }: Props) {
	return (
		<Flex height={`calc(100% - 62px)`} flexDirection={'column'}>
			{[IframeType.Website, IframeType.Amp].map((format) => {
				const Icon = formatIcons[format];
				return (
					<Flex
						alignItems={'center'}
						justifyContent={'space-between'}
						key={format}
						width={160}
						mb={10}
						itemGap={5}
					>
						<Flex
							component={'label'}
							htmlFor={`format--${format}`}
							alignItems={'center'}
							itemGap={5}
						>
							<CircleIcon background={'#B2B1B1'} width={35} height={35} p={10}>
								<Icon fill={'currentColor'} width={'100%'} />
							</CircleIcon>
							<Wrapper component={'span'}>{formatLabels[format]}</Wrapper>
						</Flex>
						<ToggleSwitch
							id={`format--${format}`}
							value={selectedFormat.includes(format)}
							onChange={() => onFormatChange(format)}
						/>
					</Flex>
				);
			})}
		</Flex>
	);
}

export default PlacementSelectFormat;