import * as React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core';
import { faTimes } from '@fortawesome/free-solid-svg-icons/faTimes';

import Modal, { ModalProps } from '../../../containers/modal/Modal';
import {
	containerStyle,
	overlayStyle,
	modalWrapperStyle,
	headerStyle,
	titleStyle,
	closeWrapperStyle,
	closeStyle,
	sectionStyle
} from './modalOne.style';
library.add(faTimes);

class ModalOne extends React.PureComponent<ModalProps> {
	render() {
		return (
			<Modal
				{...this.props}
				render={(opened: boolean, close: () => void) => {
					if (!opened) return null;
					return (
						<div role="dialog" aria-modal="true" className={containerStyle()}>
							<div className={overlayStyle()} />
							<div className={modalWrapperStyle(this.props.palette)}>
								<header className={headerStyle()}>
									<div className={titleStyle(this.props.palette)}>
										{this.props.translator(this.props.title)}
									</div>
									<div onClick={close} className={closeWrapperStyle(this.props.palette)}>
										<FontAwesomeIcon icon="times" className={closeStyle(this.props.palette)} />
									</div>
								</header>
								<section className={sectionStyle()}>{this.props.children}</section>
							</div>
						</div>
					);
				}}
			/>
		);
	}
}

export default ModalOne;