<link rel="import" href="/lib/polymer/polymer.html">
<link rel="import" href="/lib/paper-dialog/paper-dialog.html">
<link rel="import" href="/lib/paper-button/paper-button.html">
<link rel="stylesheet" href="/style.css">

<dom-module id="resource-display">
  <template>
    <style>
     :host {
         display: inline-block;
         zvertical-align: top;
         zborder: 2px rgba(84, 84, 84, 0.27) outset;
         zborder-radius: 9px;
         zpadding: 2px;
     }
    </style>
    <span class$="[[resClasses]]"><a href="{{uri}}">
      <!-- type icon goes here -->
      {{label}}
    </a></span>
    <template is="dom-if" if="{{rename}}">
      <button on-click="onRename">Rename</button>

      <paper-dialog id="renameDialog" modal
                    on-iron-overlay-closed="onRenameClosed">
        <p>
          New label:
          <input id="renameTo" autofocus type="text"
                 value="{{renameTo::input}}"
                 on-keydown="onRenameKey">
        </p>
        <div class="buttons">
          <paper-button dialog-dismiss>Cancel</paper-button>
          <paper-button dialog-confirm>OK</paper-button>
        </div>
      </paper-dialog>
      
    </template>
  </template>
  <script>
   Polymer({
       is: "resource-display",
       properties: {
           graph: { type: Object },
           uri: { type: String },
           label: { type: String },
           rename: { type: Boolean },
           minor: { type: Boolean },
           resClasses: { type: String, computed: '_resClasses(minor)', value: 'resource' },
           renameTo: { type: String, notify: true },
       },
       observers: ['onUri(graph, uri)'],
       _resClasses: function(minor) {
           return minor ? 'resource minor' : 'resource';
       },
       onUri: function(graph, uri) {
           if (!this.graph) return;
           this.graph.runHandler(this.setLabel.bind(this), `label ${this.uri}`);
       },
       setLabel: function() {
           if (!this.uri) {
               this.label = "<no uri>";
               return;
           }
           try {
               this.label = this.graph.stringValue(this.uri,
                                                   this.graph.Uri('rdfs:label'));
           } catch(e) {
               this.label = null;
           }
           if (!this.label) {
               this.label = this.uri.replace(/.*\//, '');
           }
       },
       onRename: function() {
           this.renameTo = this.label;
           this.querySelector("#renameDialog").open();
           this.querySelector("#renameTo").setSelectionRange(0, -1);
       },
       onRenameKey: function(ev) {
           if (ev.key == 'Enter') {
               this.querySelector("[dialog-confirm]").click();
           }
           if (ev.key == 'Escape') {
               this.querySelector("[dialog-dismiss]").click();
           }
       },
       onRenameClosed: function() {
           var dialog = this.querySelector("#renameDialog");
           if (dialog.closingReason.confirmed) {
               var label = this.graph.Uri('rdfs:label');
               var ctxs = this.graph.contextsWithPattern(this.uri, label, null);
               if (ctxs.length != 1) {
                   throw new Error(`${ctxs.length} label stmts for ${this.uri}`);
               }
               this.graph.patchObject(this.uri, label,
                                      this.graph.Literal(this.renameTo),
                                      ctxs[0]);
           }
       }
   });
  </script>
</dom-module>