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

<dom-module id="resource-display">
  <template>
    <style>
     :host {
         display: inline-block;
     }
     
     a.resource {
         color: inherit;
         text-decoration: none;
     }

     .resource {
         border: 1px solid #545454;
         border-radius: 5px;
         padding: 1px;
         margin: 2px;
         background: rgb(49, 49, 49);
         display: inline-block;
         text-shadow: 1px 1px 2px black;
     }
     .resource.minor {
         background: none;
         border: none;
     }
     .resource a {
         color: rgb(150, 150, 255);
         padding: 1px;
         display: inline-block;
     }
     .resource.minor a {
         text-decoration: none;
         color: rgb(155, 155, 193);
         padding: 0;
     }
    </style>

    <span class$="[[resClasses]]">
      <a href="{{href}}" id="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>
   class ResourceDisplay extends Polymer.Element {
     static get is() { return "resource-display"; }
     static get properties() {
       return {
         graph: { type: Object },
         // callers might set this as string or NamedNode.
         uri: { type: Object }, // Use .value for the string
         href: { type: String },
         label: { type: String },
         rename: { type: Boolean },
         minor: { type: Boolean },
         resClasses: { type: String, computed: '_resClasses(minor)', value: 'resource' },
         renameTo: { type: String, notify: true },
       };
     }
     static get observers() { return ['onUri(graph, uri)']; }
     
     _resClasses(minor) {
       return minor ? 'resource minor' : 'resource';
     }
     
     onUri(graph, uri) {
       if (!this.graph) {
         this.label = "...";
         this.href = "javascript:;'";
         return;
       }
       if (!this.uri) {
         this.setLabel();
         return;
       }
       if (typeof uri === 'string') {
         uri = this.graph.Uri(uri);
       }
       this.graph.runHandler(this.setLabel.bind(this),
                             `label ${uri.value}`);
     }
     
     setLabel(patch) {
       if (!this.uri) {
         this.label = "<no uri>";
         this.href = "javascript:;";
         return;
       }
       if (patch !== null &&
           !SyncedGraph.patchContainsPreds(patch,
                                           [this.graph.Uri('rdfs:label')])) {
         return;
       }
       let uri = this.uri;
       if (typeof uri === 'string') {
         uri = this.graph.Uri(uri);
       }
       this.label = this.graph.labelOrTail(uri);
       this.href = uri.value;
     }
     
     onRename() {
       this.renameTo = this.label;
       this.shadowRoot.querySelector("#renameDialog").open();
       this.shadowRoot.querySelector("#renameTo").setSelectionRange(0, -1);
     }
     
     onRenameKey(ev) {
       if (ev.key == 'Enter') {
         this.shadowRoot.querySelector("[dialog-confirm]").click();
       }
       if (ev.key == 'Escape') {
         this.shadowRoot.querySelector("[dialog-dismiss]").click();
       }
     }
     
     onRenameClosed() {
       var dialog = this.shadowRoot.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.label}`);
         }
         this.graph.patchObject(
           ((typeof this.uri) === 'string' ?
            this.graph.Uri(this.uri) : this.uri),
           label,
           this.graph.Literal(this.renameTo),
           ctxs[0]);
       }
     }
   }
   customElements.define(ResourceDisplay.is, ResourceDisplay);
  </script>
</dom-module>