import React from "react";
import Modal from "@material-ui/core/Modal";
import "./index.scss";
import Fade from '@material-ui/core/Fade';

interface TransferProps {
  handleClose: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
  isOpen: boolean;
}

interface TransferState {}

export default class Transfer extends React.Component<
  TransferProps,
  TransferState
> {
  constructor(props: TransferProps) {
    super(props);

    this.handleClose = this.handleClose.bind(this);
  }

  handleClose(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) {
    this.props.handleClose(e);
  }

  render() {
    return (
      <div>
        <Modal
          className="wrapper"
          open={this.props.isOpen}
          onClose={this.handleClose}
          aria-labelledby="simple-modal-title"
          aria-describedby="simple-modal-description"
        >
          <Fade in={this.props.isOpen}>
          <div className="transfer">
            <div className="transfer__left">
              {/* <button className="transfer__add">chuj</button> */}
              <div className="transfer__give">
                <div className="transfer__text">Oddam</div>
                <input className="transfer__input"></input>
              </div>
              <div className="transfer__receive">
                <div className="transfer__text">Przyjmę</div>
                <input className="transfer__input"></input>
              </div>
            </div>
            <div className="transfer__right">
              <div className="transfer__proposition"></div>
            </div>
          </div>
          </Fade>
        </Modal>
        
      </div>
    );
  }
}