import React, { Component } from 'react';
import PropTypes from 'prop-types';
import './SampleModal.scss';
import { Dialog } from 'ca-ui-toolkit';

const GUIDE_PIC_IMG_PATH = 'images/SampleModalGuide.png';

export class SampleModal extends Component {
	static propTypes = {
		/** Handler to close the modal */
		closeHandler: PropTypes.func.isRequired,
		/** A copy of the i18n object used to translate strings */
		stringGetter: PropTypes.object,
		/** The helper to open the sample folder in the side nav-bar */
		sampleOpener: PropTypes.func
	};

	render() {
		const { stringGetter } = this.props;

		const dialogProps = {
			size: 'large',
			width: '634px',
			minWidth: '634px',
			clickaway: true,
			theme: 'ba-theme-default',
			className: 'sampleModal_dialog',
			style: { 'padding-bottom': '64px' },
			startingFocusIndex: -1
		};

		return (<Dialog
			{...dialogProps}
			onClose={() => {
				this.props.closeHandler();
			}}
		>
			<Dialog.Header>{stringGetter.get('modal_sample_title')}</Dialog.Header>
			<Dialog.Body>
				<div>{stringGetter.get('modal_sample_description')}</div>
				<div className="sampleModalPicContainer">
					<img src={GUIDE_PIC_IMG_PATH}></img>
				</div>
			</Dialog.Body>
			<Dialog.Footer>
				<Dialog.Button label={stringGetter.get('modal_sample_button_text')} onClick={() => {this.props.closeHandler();this.props.sampleOpener();}} primary/>
			</Dialog.Footer>
		</Dialog>);
	}
}