// Copyright 2016 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

Polymer({
  is: 'cr-drawer',

  properties: {
    heading: String,

    /** @private */
    show_: {
      type: Boolean,
      reflectToAttribute: true,
    },

    /** The alignment of the drawer on the screen ('ltr' or 'rtl'). */
    align: {
      type: String,
      value: 'ltr',
      reflectToAttribute: true,
    },
  },

  /** @type {boolean} */
  get open() {
    return this.$.dialog.open;
  },

  set open(value) {
    assertNotReached('Cannot set |open|.');
  },

  /** Toggles the drawer open and close. */
  toggle: function() {
    if (this.open)
      this.cancel();
    else
      this.openDrawer();
  },

  /** Shows drawer and slides it into view. */
  openDrawer: function() {
    if (this.open)
      return;
    this.$.dialog.showModal();
    this.show_ = true;
    this.fire('cr-drawer-opening');
    listenOnce(this.$.dialog, 'transitionend', () => {
      this.fire('cr-drawer-opened');
    });
  },

  /**
   * Slides the drawer away, then closes it after the transition has ended. It
   * is up to the owner of this component to differentiate between close and
   * cancel.
   * @param {boolean} cancel
   */
  dismiss_: function(cancel) {
    if (!this.open)
      return;
    this.show_ = false;
    listenOnce(this.$.dialog, 'transitionend', () => {
      this.$.dialog.close(cancel ? 'canceled' : 'closed');
    });
  },

  cancel: function() {
    this.dismiss_(true);
  },

  close: function() {
    this.dismiss_(false);
  },

  /** @return {boolean} */
  wasCanceled: function() {
    return !this.open && this.$.dialog.returnValue == 'canceled';
  },

  /**
   * Stop propagation of a tap event inside the container. This will allow
   * |onDialogTap_| to only be called when clicked outside the container.
   * @param {!Event} event
   * @private
   */
  onContainerTap_: function(event) {
    event.stopPropagation();
  },

  /**
   * Close the dialog when tapped outside the container.
   * @private
   */
  onDialogTap_: function() {
    this.cancel();
  },

  /**
   * Overrides the default cancel machanism to allow for a close animation.
   * @param {!Event} event
   * @private
   */
  onDialogCancel_: function(event) {
    event.preventDefault();
    this.cancel();
  },

  /**
   * @param {!Event} event
   * @private
   */
  onDialogClose_: function(event) {
    // TODO(dpapad): This is necessary to make the code work both for Polymer 1
    // and Polymer 2. Remove once migration to Polymer 2 is completed.
    event.stopPropagation();

    // Catch and re-fire the 'close' event such that it bubbles across Shadow
    // DOM v1.
    this.fire('close');
  },
});