content: /**
   * External dependencies
   */
  import React from 'react'
  import PropTypes from 'prop-types'
  import { MDCDialog, MDCDialogFoundation, util } from '@material/dialog';
  
  /**
   * Internal dependencies
   */
  import './style.scss'
  
  export default class Dialog extends React.PureComponent {
  	static propTypes = {
  		title: PropTypes.string,
  		description: PropTypes.element,
  		footer: PropTypes.element,
  		isOpened: PropTypes.bool,
  		isClosed: PropTypes.func
  	}
  
  	foundation = new MDCDialogFoundation({
  		addClass: function (className) {
  			this.setState(function (prevState) {
  				classes: prevState.classes.add(className)
  			})
  		},
  		removeClass: function (className) {
  			this.setState(function (prevState) {
  				classes: prevState.classes.remove(className)
  			})
  		},
  		addBodyClass: function (className) {
  			document.body.classList.add(className)
  		},
  		removeBodyClass: function (className) {
  			document.body.classList.remove(className)
  		},
  		registerInteractionHandler: function (evt, handler) {
  			this.refs.root.addEventListener(evt, handler)
  		},
  		deregisterInteractionHandler: function (evt, handler) {
  			this.refs.root.removeEventListener(evt, handler)
  		},
  		registerSurfaceInteractionHandler: function (evt, handler) {
  			this.refs.surface.addEventListener(evt, handler)
  		},
  		deregisterSurfaceInteractionHandler: function (evt, handler) {
  			this.refs.surface.removeEventListener(evt, handler)
  		},
  		registerDocumentKeyDownHandler: function (handler) {
  			document.addEventListener('keydown', handler)
  		},
  		deregisterDocumentKeyDownHandler: function (handler) {
  			document.removeEventListener('keydown', handler)
  		},
  		registerTransitionEndHandler: function (handler) {
  			this.refs.surface.addEventListener('transitionend', handler)
  		},
  		deregisterTransitionEndHandler: function (handler) {
  			this.refs.surface.removeEventListener('transitionend', handler)
  		}
  	})
  
  	constructor() {
  		super(...arguments)
  		this.state = {
  			classes: ''
  		}
  	}
  
  	componentDidMount() {
  		this.foundation.init()
  	}
  
  	isClosed() {
  		if (! this.foundation.isOpen()) {
  			this.props.isClosed()
  		}
  	}
  
  	componentWillReceiveProps(nextProps) {
  		if (nextProps.isOpened === true) {
  			this.foundation.open()
  		}
  	}
  
  	componentWillUnmount() {
  		this.foundation.destroy()
  	}
  
  	render() {
  		const { title, description, footer } = this.props
  
  		return (
  			<aside ref='root' className='mdc-dialog'>
  		  	<div ref='surface' className='mdc-dialog__surface'>
  			    <header className='mdc-dialog__header'>
  			      <h2 className='mdc-dialog__header__title'>
  			        { title }
  			      </h2>
  			    </header>
  			    <section className='mdc-dialog__body'>
  			  		{ description }
  			    </section>
  			    <footer className='mdc-dialog__footer'>
  			      { footer }
  			    </footer>
  		  	</div>
  		  	<div className='mdc-dialog__backdrop'></div>
  			</aside>
  		)
  	}
  }