import { __decorate, __metadata } from "tslib";
import '@material/web/icon/icon.js';
import gql from 'graphql-tag';
import { LitElement, html, css } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { client } from '@operato/graphql';
function isOriginSameAsLocation(url) {
    function defaultPort(protocol) {
        return { 'http:': 80, 'https:': 443 }[protocol];
    }
    function portOf(location) {
        return location.port || defaultPort(location.protocol || pageLocation.protocol);
    }
    try {
        var pageLocation = window.location;
        var urlparts = new URL(url, pageLocation.href);
        return !!(urlparts.protocol &&
            urlparts.protocol == pageLocation.protocol &&
            urlparts.host &&
            urlparts.host == pageLocation.host &&
            urlparts.host &&
            portOf(urlparts) == portOf(pageLocation));
    }
    catch (err) {
        console.warn(err, url);
    }
}
let NotificationItem = class NotificationItem extends LitElement {
    static { this.styles = [
        css `
      :host {
        position: relative;
        background-color: var(--md-sys-color-surface);
        padding: var(--spacing-medium);
        border-left: 0 solid transparent;
        border-bottom: 1px solid var(--md-sys-color-outline-variant) !important;
        transition:
          border-left 200ms ease-in-out,
          padding-left 200ms ease-in-out;
        color: var(--md-sys-color-on-surface);

        --type-dot-size: 9px;
      }

      :host([newbie]) {
        background-color: var(--md-sys-color-surface-variant);
      }

      :host(:hover) {
        padding-left: 0.5rem;
        border-left: 0.2rem solid var(--status-info-color);
      }

      [titler] {
        white-space: normal;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: var(--fontsize-large);
        font-weight: bold;
        color: var(--md-sys-color-secondary);
      }

      [titler] span {
        display: inline-block;
        width: var(--type-dot-size);
        height: var(--type-dot-size);
        border-radius: 50%;
        margin-right: var(--spacing-small);
        margin-bottom: var(--spacing-tiny);
      }
      [titler] * {
        vertical-align: middle;
      }

      [close] {
        position: absolute;
        top: 13px;
        right: 0;
        font-size: var(--fontsize-large);
        opacity: 0.5;
        cursor: pointer;
      }
      [close]:hover {
        opacity: 1;
      }
      [detail] {
        padding: var(--spacing-small) var(--spacing-medium);
        border-radius: var(--border-radius);
        font-size: 0.85em;
      }
      span.more {
        margin-left: 16px;
        float: right;
        padding: 0px var(--spacing-small) 2px var(--spacing-small);
        border-radius: var(--border-radius);
        font-size: 0.8em;
        color: var(--md-sys-color-on-primary);
        --md-icon-size: 14px;
      }
      span.more * {
        vertical-align: middle;
      }

      :host([type='ERROR']) span {
        background-color: var(--status-danger-color);
      }
      :host([type='ERROR']) {
        border-color: var(--status-danger-color);
      }
      :host([type='ERROR']) [detail] {
        border: 1px solid rgba(241, 53, 63, 0.5);
        background-color: rgba(241, 53, 63, 0.1);
      }
      :host([type='WARN']) span {
        background-color: var(--status-warning-color);
      }
      :host([type='WARN']) {
        border-color: var(--status-warning-color);
      }
      :host([type='SUCCESS']) span {
        background-color: var(--status-success-color);
      }
      :host([type='SUCCESS']) {
        border-color: var(--status-success-color);
      }
      :host([type='INFO']) span,
      :host span {
        background-color: var(--status-info-color);
      }
      :host([type='INFO']) {
        border-color: var(--status-info-color);
      }

      img {
        display: block;
        max-width: 100%;
        margin: auto;
      }

      [message] {
        font-size: var(--fontsize-default);
        color: var(--md-sys-color-secondary);
      }

      [timestamp] {
        white-space: nowrap;
        font-size: var(--fontsize-small);
        color: var(--md-sys-color-on-surface-variant);
      }
    `
    ]; }
    render() {
        const { title, url, image, timestamp, body } = this.notification;
        const target = this.target;
        const detail = this.detail;
        const type = this.type;
        return html `
      <div titler>
        <span></span>
        ${url
            ? target
                ? html `<a href=${url} target=${target}>${title}</a>`
                : html `<a href=${url}>${title}</a>`
            : title}
      </div>
      <md-icon close @click=${e => this.dispatchEvent(new CustomEvent('close'))}>close</md-icon>

      ${image
            ? url
                ? target
                    ? html `<a href=${url} target=${target}><img src=${image} /></a>`
                    : html `<a href=${url}><img src=${image} /></a>`
                : html `<img src=${image} />`
            : html ``}
      <div message>${body}</div>
      ${type == 'ERROR'
            ? html `<div
            @click=${() => {
                this.decipherErrorCode();
            }}
          >
            <span class="more"><md-icon>expand_circle_down</md-icon> more</span>
          </div>`
            : html ``}
      ${detail ? html `<div detail>${detail.message}</div>` : html ``}

      <div timestamp>${new Date(Number(timestamp)).toLocaleString()}</div>
    `;
    }
    updated(changed) {
        if (!this.notification?.confirmed) {
            this.setAttribute('newbie', '');
        }
        else {
            this.removeAttribute('newbie');
        }
        const url = this.notification?.url;
        this.target = url && !isOriginSameAsLocation(url) && '_blank';
    }
    async decipherErrorCode() {
        if (this.type != 'ERROR' || !this.notification) {
            return;
        }
        const { title, body } = this.notification;
        var code = `${title}`;
        if (body) {
            code += `: ${body}`;
        }
        const response = await client.query({
            query: gql `
        query ($input: CodeDecipherInput!) {
          decipherErrorCode(input: $input) {
            message
          }
        }
      `,
            variables: {
                input: {
                    code,
                    system: ''
                }
            }
        });
        this.detail = response.data.decipherErrorCode;
    }
};
__decorate([
    property({ type: String, reflect: true }),
    __metadata("design:type", String)
], NotificationItem.prototype, "type", void 0);
__decorate([
    property({ type: Object }),
    __metadata("design:type", Object)
], NotificationItem.prototype, "notification", void 0);
__decorate([
    property({ type: String }),
    __metadata("design:type", String)
], NotificationItem.prototype, "target", void 0);
__decorate([
    property({ type: Object }),
    __metadata("design:type", Object)
], NotificationItem.prototype, "detail", void 0);
__decorate([
    property({ type: Boolean }),
    __metadata("design:type", Boolean)
], NotificationItem.prototype, "newbie", void 0);
NotificationItem = __decorate([
    customElement('notification-item')
], NotificationItem);
export { NotificationItem };
//# sourceMappingURL=notification-item.js.map