import React, { Component } from 'react';
import { Modal, Popup, PopupSimple, PopupFull } from 'acl-ui/components';
import { PlaceholderText } from '../helpers/Placeholder/';

class ModalExample extends Component {
  constructor() {
    super();
    this.state = {
      simpleModalOpen: false,
      fullModalOpen: false,
    };
  }

  onCloseModal() {
    this.setState({ fullModalOpen: false });
  }

  onPopupSave() {
    alert('saved');
    this.setState({ fullModalOpen: false });
  }

  onPopupCancel() {
    this.setState({ fullModalOpen: false });
  }

  onPopupClose() {
    this.setState({ fullModalOpen: false });
  }

  render() {
    return (
      <div>
        <button onClick={() => this.setState({ fullModalOpen: true })}>Full Popup</button>
        <button onClick={() => this.setState({ simpleModalOpen: true })}>Simple Popup</button>

        <Modal open={this.state.fullModalOpen} onClose={() => this.onCloseModal()}>
          <Popup
            title="Once upon a time in Vancouver"
            onSave={() => this.onPopupSave()}
            onCancel={() => this.onPopupCancel()}
            onClose={() => this.onPopupClose()}
          >
            <PlaceholderText type="media-alt" rows={3} />
          </Popup>
        </Modal>

        <Modal
          open={this.state.simpleModalOpen}
          onClose={() => this.setState({ simpleModalOpen: false })}
        >
          <PopupSimple
            title="Once upon a time in a Simple Vancouver"
            onSave={() => { alert('continue'); this.setState({ simpleModalOpen: false }); }}
            onClose={() => this.setState({ simpleModalOpen: false })}
          >
            <PlaceholderText rows={1} />
          </PopupSimple>
        </Modal>
      </div>
    );
  }
}

export default ModalExample;