import React from 'react';
import { Alignment } from './placements.models';
import { Wrapper, Flex } from 'dot-design-system';
import { MdFormatAlignCenter, MdFormatAlignLeft, MdFormatAlignRight } from 'react-icons/md/index';
import { IconType } from 'react-icons';

interface Props {
	alignment: Alignment;
	onAlignmentChange: (alignment: Alignment) => void;
}

const alignmentLabels: { [Item in Alignment]: string } = {
	[Alignment.Center]: 'Centre',
	[Alignment.Left]: 'Left',
	[Alignment.Right]: 'Right',
};

const alignmentIcons: { [Item in Alignment]: IconType } = {
	[Alignment.Center]: MdFormatAlignCenter,
	[Alignment.Left]: MdFormatAlignLeft,
	[Alignment.Right]: MdFormatAlignRight,
};

function PlacementSelectAlignment({ alignment, onAlignmentChange }: Props) {
	return (
		<Wrapper>
			{Object.values(Alignment).map((item) => {
				const Icon = alignmentIcons[item];
				return (
					<Flex
						key={item}
						itemGap={10}
						mb={20}
						onClick={() => onAlignmentChange(item)}
						alignItems={'end'}
						opacity={(alignment === item && 1) || 0.5}
						css={`
							cursor: pointer;
						`}
					>
						<Wrapper fontSize={22}>
							<Icon />
						</Wrapper>
						<Wrapper fontSize={18}>{alignmentLabels[item]}</Wrapper>
					</Flex>
				);
			})}
		</Wrapper>
	);
}

export default PlacementSelectAlignment;