import React, { Fragment } from 'react';
import { ModalContainer, Modal } from 'minimal-react-modal';
import reduxLang from '../../middleware/lang';

const CVAGBInput = ({ onAGBChange, t }) => (
	<ModalContainer>
		{(openModal, closeModal, isActive) => (
			<div className='CVForm CVAGBInput'>
				<div className='medium-text'>
					<input
						type='checkbox'
						name='AGB'
						value='AGB'
						className='checkboxAGB'
						onChange={onAGBChange}
					/>
					&nbsp; {t('accept_rules_part1')}{' '}
					<a onClick={openModal}>{t('accept_rules_part2')}</a>{t('accept_rules_part3')}
				</div>
				<Modal
					isActive={isActive} // required
					closeModal={closeModal} // required
				>
					<AGB closeModal={closeModal} />
				</Modal>
			</div>
		)}
	</ModalContainer>
);

export default reduxLang('ContribView')(CVAGBInput);

const _AGB = ({ closeModal, t }) => (
	<div className='Modal--container'>
		<div className='Modal--body'>
			<button onClick={closeModal}>
				<img src='/static/gfx/alps_x.svg' alt='close' />
			</button>
			<h1 className='big-text'>{t('title')}</h1>
			{[...Array(6).keys()].map(key => (
				<Fragment key={key}>
					<h4 className='medium-text'>{t(`rule${key + 1}_title`)}</h4>
					<p className='small-text'>{t(`rule${key + 1}_text`)}</p>
				</Fragment>
			))}
		</div>
	</div>
);
const AGB = reduxLang('Rules')(_AGB);