import * as React from 'react'
import { StylableComponent } from '../../theme'
import { ModalRootComponentProps } from '../interfaces'
import { Button } from '../../button'
import { ButtonBar } from '../../button-bar'
import { Icon } from '../../icon'
import { ModalPopup, ModalPopupContent } from './modal-popup'

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

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

    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>
        )
    }
}