import React from 'react';
import { Wrapper, Grid } from 'dot-design-system';
import { IWidget } from 'dot-utils';
import { path } from 'ramda';
import CircleIconButton from '../elements/CircleIconButton';

interface Props {
	widgets: IWidget[];
	onSelect: (widget: IWidget) => void;
}

function PlacementWidgetSelect({ widgets, onSelect }: Props) {
	const handleCreateWidgetClick = (e: any) => {
		e.preventDefault();
		const anchor = e.target.closest('a');

		if (anchor) {
			window.open(anchor.href);
		}
	};

	return (
		<Wrapper>
			<CircleIconButton
				component={'a'}
				href={`${process.env.APP_URL}/login`}
				onClick={handleCreateWidgetClick}
			>
				Click here to Create Account/Login
			</CircleIconButton>
			<Grid columnLayout={'1fr 1fr 1fr'} gridGap={10}>
				{widgets.map((widget) => {
					const imgSrc = path(['questions', 0, 'imgSrc'], widget);
					return (
						<Wrapper key={widget.id} onClick={() => onSelect(widget)}>
							<Wrapper
								component={'img'}
								src={imgSrc as string}
								width={'100%'}
								height={300}
								css={`
									object-fit: cover;
								`}
							/>
							{widget.title || `${widget.type} Widget - ID: ${widget.id}`}
						</Wrapper>
					);
				})}
			</Grid>
		</Wrapper>
	);
}

export default PlacementWidgetSelect;