// @flow
import * as React from 'react'
import styled from 'styled-components'
import LazyImg from './LazyImg'

type Props = {
  from: string,
  original: string,
  width: number,
  height: number,
  isLoaded: boolean,
  onLoad: () => void,
  onUnLoad: () => void,
  onClose: () => void,
}

export default class IllustPreview extends React.PureComponent<Props> {
  componentWillUnmount() {
    this.props.onUnLoad()
  }

  handleOnClose = () => {
    this.props.onClose()
  }

  render() {
    const { width, height, from, original } = this.props

    return (
      <StyledPreview onClick={this.handleOnClose}>
        <LazyImg
          from={from}
          original={original}
          width={width}
          height={height}
          isLoaded={this.props.isLoaded}
          onLoad={this.props.onLoad}
          onClose={this.props.onClose}
        />
      </StyledPreview>
    )
  }
}

const StyledPreview = styled.div`
  display: flex;
  position: fixed;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  top: 0;
  left: 0;
  background: rgba(24, 24, 24, 0.97);
  cursor: pointer;
  overflow: auto;
  z-index: 999;
`

@@ -415,61 +415,335 @@
 )%0A  
-%7D%0A%0A  handleOnClose = () =%3E %7B%0A    this.props.onClose()
+  window.removeEventListener('keydown', this.escToClose, false)%0A  %7D%0A%0A  componentDidMount() %7B%0A    window.addEventListener('keydown', this.escToClose.bind(this), false)%0A  %7D%0A%0A  handleOnClose = () =%3E %7B%0A    this.props.onClose()%0A  %7D%0A%0A  escToClose = (event: Event) =%3E %7B%0A    if (event.keyCode === 27) %7B%0A      this.handleOnClose()%0A    %7D
 %0A  %7D

Implement the function to close modal with ESC key