import * as React from 'react';
import { TemplateContainer } from '../../containers/template/Template';
import Template from '../../containers/template/Template';
import { Colors } from '../../models/colors';
import { oneColWithWelcomeStyle, formStyle, submitWrapperStyle } from './oneColWithWelcome.style';

const TemplateExample = (props: TemplateContainer) => {
	return (
		<Template
			{...props}
			render={(_props: {
				elements: JSX.Element[];
				palette: Colors;
				onSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
				submitButton: JSX.Element;
			}) => {
				const { elements, submitButton, palette, onSubmit } = _props;
				const submitBtn = React.cloneElement(submitButton, {
					text: `${props.name}.next`,
					automationName: `${props.name}-auth-button`,
					gtmId: `submit-${props.name}-cta`
				});
				return (
					<div className={oneColWithWelcomeStyle(palette)}>
						<form className={formStyle()} onSubmit={onSubmit} autoComplete="off">
							{elements &&
								elements.length &&
								elements.map((item, i) => {
									if (i === 0) {
										return <React.Fragment key={i}>{item}</React.Fragment>;
									}
									return <React.Fragment key={i}>{item}</React.Fragment>;
								})}
							<div className={submitWrapperStyle()}>{submitBtn}</div>
						</form>
					</div>
				);
			}}
		/>
	);
};

export default TemplateExample;