import { h } from '@stencil/core';
export class DrupalNode {
    componentDidLoad() {
        this.postRender();
    }
    componentDidUpdate() {
        this.postRender();
    }
    postRender() {
        let bodyField = this.el.querySelector('.field--name-body');
        if (this.data.attributes.body) {
            bodyField.innerHTML = this.data.attributes.body.value;
        }
        else {
            bodyField.innerHTML = '';
        }
    }
    parseNode(node) {
        // console.log(node);
        let type = node.type.split('--')[1];
        switch (type) {
            case 'page':
                // code block
                break;
            case 'app':
                // this.nodeData = JSON.parse(node.field_json[0].value);
                break;
            case 'iframe':
                // code block
                break;
            default:
            // code block
        }
        return node;
    }
    render() {
        let data;
        if (this.dataJson) {
            data = this.data = this.parseNode(JSON.parse(this.dataJson).data);
        }
        return (h("article", { id: 'node-' + data.attributes.nid, class: 'node node--type-' + data.type.split('--')[1] + ' node--view-mode-full clearfix' },
            h("header", null,
                h("h2", { class: "title node__title" }, data.attributes.title)),
            h("div", { class: "node__content clearfix" },
                h("div", { class: "field field--name-body" }),
                data.attributes.field_iframe &&
                    h("div", { class: "field field--name-iframe" },
                        h("ema-iframe", { src: data.attributes.field_iframe.uri, width: data.attributes.field_width, height: data.attributes.field_height })))));
    }
    static get is() { return "ema-drupal-node"; }
    static get originalStyleUrls() { return {
        "$": ["drupal-node.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["drupal-node.css"]
    }; }
    static get properties() { return {
        "dataJson": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "data-json",
            "reflect": false
        }
    }; }
    static get states() { return {
        "data": {}
    }; }
    static get elementRef() { return "el"; }
}
//
// @Component({
//     selector: 'ab-drupal-entity-node',
//     template: `
//         <article *ngIf="data" id="node-{{ data.attributes.nid }}"
//                  class="node node--type-{{ data.type.split('--')[1] }} node--view-mode-full clearfix">
//
//
//             <div [ngSwitch]="data.type.split('--')[1]" class="node__content clearfix">
//
//                 <div *ngIf="data.relationships['field_icon'] && data.relationships['field_icon'].data" class="field field--name-icon">
//                     <!--<div>{{data.relationships['field_icon'].data.id}}</div>-->
//                     <img [src]="drupalService.siteParams.base_root + drupalService.model.entities[data.relationships['field_icon'].data.id].data.attributes.url"/>
//                 </div>
//
//                 <ng-container *ngIf="data.relationships['field_image']">
//                     <div *ngFor="let item of data.relationships['field_image'].data" class="field field--name-image">
//                         <div class="meta title">{{item.meta.title}}</div>
//                         <img [src]="drupalService.siteParams.base_root + drupalService.model.entities[item.id].attributes.url"/>
//                     </div>
//                 </ng-container>
//
//                 <ng-container *ngSwitchCase="'iframe'">
//                     <div class="field field--name-iframe">
//                         <iframe [src]="data.attributes.field_iframe.uriSafe" width="{{ data.attributes.field_width }}"
//                                 height="{{ data.attributes.field_height }}" frameborder="0" style="visibility:hidden;"
//                                 onload="this.style.visibility='visible';" allowtransparency=”true”></iframe>
//                     </div>
//                 </ng-container>
//
//             </div>
//
//         </article>
//     `
// })
// export class NodeComponent extends Node implements OnChanges {
//     @Input() node: any;
//
//     constructor(private drupalService: DrupalService, public sanitizer: DomSanitizer) {
//         // constructor(public sanitizer: DomSanitizer) {
//         super();
//     }
//
//     ngOnChanges(changes) {
//         if (!this.node) {
//             return;
//         }
//         this.data = this.node.data;
//         this.sanitize(this.node.data);
//         this.parse(this.node);
//     }
//
//     private sanitize(data) {
//         if (!data) {
//             return;
//         }
//         if (data.attributes.body) {
//             data.attributes.body.valueSafe = this.sanitizer.bypassSecurityTrustHtml(data.attributes.body.value);
//         }
//         if (data.attributes.field_iframe) {
//             data.attributes.field_iframe.uriSafe = this.sanitizer.bypassSecurityTrustResourceUrl(data.attributes.field_iframe.uri);
//         }
//     }
//
//     public parse(node) {
//         // switch (node.data.type.split('--')[1]) {
//         //     case 'app':
//         //         // this.nodeData = JSON.parse(node.field_json[0].value);
//         //         break;
//         //     case 'iframe':
//         //         // code block
//         //         break;
//         //     default:
//         //     // code block
//         // }
//     }
//
//     // public relationship(field: string) {
//     //     let items = [];
//     //     if(!this.data.relationships && !this.data.relationships[field]) {
//     //         return items;
//     //     }
//     //     if (this.data.relationships[field]) {
//     //         this.data.relationships[field].data.forEach((object,i) => {
//     //             items.push(object)
//     //         });
//     //     }
//     //     console.log(items);
//     //     return items;
//     // }
//
//
// }
