import * as React from 'react'
import { ModalRootComponentProps } from '../../interfaces/modal'
import { Button, ButtonBar, Icon, ModalPopup, ModalPopupContent} from '../'

const styles = require('../../../src/styles/components/modal.scss')

/**
 * A message modal only has one button
 * and all it does is close the modal
 */
export class MessageModal extends React.Component<ModalRootComponentProps, any> {

    public render() {
        const { closeButton, message, icon } = this.props.state.modalProps

        return (
            <ModalPopup closeButton={closeButton}>
                <ModalPopupContent>
                    {icon
                        ? <Icon
                            className={styles.modalIcon}
                            size={32}
                            fill="primary"
                            icon={icon} />
                        : null}
                    <div className={styles.modalMessage}> {message} </div>
                </ModalPopupContent>
                <ButtonBar>
                    <Button onClick={this.props.closeModal}>OK</Button>
                </ButtonBar>
            </ModalPopup>
        )
    }
}