import { LitElement, html, css } from 'lit'
import '@material/mwc-icon'

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)

    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)
  }
}

export class NotificationItem extends LitElement {
  static get styles() {
    return [
      css`
        :host {
          position: relative;
          background-color: var(--theme-white-color);
          padding: var(--padding-default);
          border-left: 0 solid transparent;
          border-bottom: var(--border-dark-color) !important;
          transition: border-left 300ms ease-in-out, padding-left 300ms ease-in-out;
          color: var(--scondary-color);

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

        :host([newbie]) {
          background-color: var(--paper-light-green-50);
        }

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

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

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

        [close] {
          position: absolute;
          top: 13px;
          right: 0;
          font-size: var(--fontsize-large);
          opacity: 0.5;
          cursor: pointer;
        }
        [close]:hover {
          opacity: 1;
        }

        :host([type='ERROR']) span {
          background-color: var(--status-danger-color);
        }
        :host([type='ERROR']) {
          border-color: var(--status-danger-color);
        }
        :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(--secondary-color);
        }

        [timestamp] {
          white-space: nowrap;
          font-size: var(--fontsize-small);
          color: var(--secondary-text-color);
        }
      `
    ]
  }

  static get properties() {
    return {
      type: {
        type: String,
        reflect: true
      },
      notification: Object,
      target: String
    }
  }

  render() {
    const { title, url, image, timestamp, body } = this.notification
    const target = this.target

    return html`
      <div title>
        <span></span>
        ${url
          ? target
            ? html`<a href=${url} target=${target}>${title}</a>`
            : html`<a href=${url}>${title}</a>`
          : title}
      </div>
      <mwc-icon close @click=${e => this.dispatchEvent(new CustomEvent('close'))}>close</mwc-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>
      <div timestamp>${new Date(Number(timestamp)).toLocaleString()}</div>
    `
  }

  updated(changed) {
    if (!this.notification?.confirmed) {
      this.setAttribute('newbie', true)
    } else {
      this.removeAttribute('newbie')
    }

    const url = this.notification?.url
    this.target = url && !isOriginSameAsLocation(url) && '_blank'
  }
}

customElements.define('notification-item', NotificationItem)
