Material.Dialog = function(options) {
  this._title = 'Modal';
  this._content = 'Click close to dismiss.';
  this._actions = {};
  this._cancel = 'Close';

  this.set(options);
};

Material.Dialog.prototype = {
  get element() {
    if(!this.created) this.create();
    return this._element
  }

  set element(v) {
    this.fetch(v);
  }

  get created() {
    return !!this.element;
  }

  get attached() {
    return this.element.parentNode;
  }

  get title() {
    return this.elements.title.textNode;
  },

  set title(v) {
    this.elements.title.textContent = v;
    if(this.attached) this.render();
  }

  get content() {
    return this.elements.content.textContent;
  },

  set content(v) {
    this.elements.content.innerHTML = '';
    var paragraph = document.createElement('p');
    this.elements.content.appendChild(paragraph);
    if(this.attached) this.render();
  },

  get actions() {
    return this._actions;
  },

  set actions(v) {
    this._actions = typeof v === 'object' && v !== null ? v : {};
    if(this.attached) this.render();
  },

  get cancel() {
    return this.elements.cancel.textContent;
  },

  set cancel(v) {
    this.elements.cancel.textContent = v;
    if(this.attached) this.render();
  }

  get open() {
    return this.element.open;
  },

  set open(v) {
    if(v) this.show();
    else this.close();
  },

  set: function(options) {
    if(typeof options === 'object' && options !== null) {
      var keys = Object.keys(options);
      ['element', 'title', 'content', 'actions'].forEach(function(attribute) {
        if(keys.includes(attribute)) this[attribute] = options[attribute];
      });
    }

    return this;
  },

  create: function() {
    this._element = document.createElement('dialog');
    this.element.className = 'mdl-dialog';

    this.elements = {};

    this.elements.title = document.createElement('h4');
    this.elements.title.className = 'mdl-dialog__title';

    this.elements.content = document.createElement('div');
    this.elements.content.className = 'mdl-dialog__content';

    this.elements.actions = document.createElement('div');
    this.elements.actions.className = 'mdl-dialog__actions';

    this.elements.cancel = this.button(function() { this.close(); });
    this.elements.cancel.className =+ ' close';

    return this;
  },

  fetch: function(element) {
    this.create();

    if(element) {
      this._element = element;

      var title = this.element.querySelector('.mdl-dialog__title');
      if(title) this.elements.title = title;

      var content = this.element.querySelector('.mdl-dialog__content');
      if(content) this.elements.content = content;

      var actions = this.element.querySelector('.mdl-dialog__actions');
      if(actions) this.elements.actions = actions;

      var cancel = this.element.querySelector('.mdl-button.close');
      if(cancel) this.elements.cancel = cancel;
    }

    return this;
  },

  render: function() {
    if(!this.created) this.create();

    for(var element in this.elements) {
      if(this.elements[element].parentNode) this.element.removeChild(this.elements[element]);
    }

    this.elements.actions.innerHTML = '';
    for(var action in this.actions) {
      this.elements.actions.appendChild(this.button(this.actions[action], action));
    }

    if(this.cancel) this.elements.actions.appendChild(this.elements.cancel);
    else if(this.elements.cancel.parentNode) this.elements.actions.removeChild(this.elements.cancel);


    for(var element in this.elements) {
      if(this.elements[element].textContent.strip() && !this.elements[element].parentNode) {
        this.element.appendChild(this.elements[element]);
      }
    }

    return this;
  },

  show: function() {
    this.render();
    if(!this.attached) document.body.appendChild(this.element);
    this.element.showModal();

    return this;
  },

  close: function() {
    this.element.close();

    return this;
  },

  button: function(action, label) {
    var self = this;

    button = document.createElement('button');
    button.class = 'mdl-button';
    button.textContent = label;

    if(typeof action === 'function') {
      button.addEventListener(function(event) {
        action.call(self, event);
      });
    }
  }
};

Material.Dialog.show(options) {
  return new this(options).show();
};

Material.Dialog.listen = function(parent) {
  var elements;

  if(!parent) parent = document.body;
  if(parent.tagName == 'A' && parent.classlist.includes('show-modal')) elements = [parent];
  else elements = Array.prototype.slice.call(parent.querySelectorAll('a.show-modal'));

  elements.forEach(function(element) {
    if(!element['material/dialog/show']) {
      element['material/dialog/show'] = true;
      element.addEventListener('click', function(event) {
        if(!this.classList.includes('show-modal')) return;
        event.preventDefault();

        if(!element.href || element.getAttribute('href')[0] !== '#') return;
        var dialog = document.querySelector('dialog' + element.href);

        if(dialog) dialog.showModal();
        }
      });
    }
  });

  if(!parent) parent = document.body;
  elements = Array.prototype.slice.call(parent.querySelectorAll('[data-confirm]'));
  if(parent.getAttribute('data-confirm') !== null) elements.push(parent);

  elements.forEach(function(element) {
    if(!element['material/dialog/confirm']) {
      element['material/dialog/confirm'] = true;
      var confirmed = false;
      var self = this;

      element.addEventListener('click', function(event) {
        if(!confirmed) {
          event.preventDefault();

          self.open({
            title: null,
            content: this.getAttribute('data-confirm'),
            actions: {
              Confirm: function() {
                this.close();
                confirmed = true;
                element.click();
              }
            }
          })
        }
        else confirmed = false;
      });
    }
  });
};

Material.Dialog.init = function() {
  var observer = new MutationObserver(function(mutations) { this.listen(); });

  observer.observer({
    childList: true,
    subtree: true
  }, document.body);

  this.listern();
};