import * as React from 'react';
import * as ReactDOM from 'react-dom';

import { ModalStyle, Close } from './Modal.styled';
import { Sizes, Button } from '../index';
import * as Icon from '../Icons';

interface IProps {
  active: boolean;
  onClose: (boolean: boolean) => void;
}

export default class Modal extends React.PureComponent<IProps> {
  state = {
    translate: 'enter',
  };

  onClose = async () => {
    this.setState({ translate: 'leave' });
    setTimeout(() => {
      this.props.onClose(false);
      this.setState({ translate: 'enter' });
    }, 550);
  }

  render () {
    const { active } = this.props;
    return (
      <React.Fragment>
        {active && ReactDOM.createPortal((
          <ModalStyle translate={this.state.translate}>
            <Close type='button' onClick={this.onClose}>
              <Icon.Close width={Sizes.s4} height={Sizes.s4} />
            </Close>
            {this.props.children}
            <Button isType='outline' type='button' onClick={this.onClose} css={`margin: ${Sizes.s5}px 0; display: block;`}>
              FECHAR
            </Button>
          </ModalStyle>
        ), (document.getElementById('modal') as HTMLElement))}
      </React.Fragment>
    );
  }
}