import { css, html, nothing, unsafeCSS } from "lit";
import { customElement } from "lit/decorators.js";
import { msg } from "@lit/localize";
import { Task } from "@lit/task";

import type { PropertiesPicker, Resource } from "@src/tems";
import * as rdf from "@src/rdf";
import * as utils from "@helpers";

import "~icons/mingcute/notification-line";

import ComponentStyle from "@styles/orbit/notification/tems-notification.scss?inline";

@customElement("solid-tems-notification")
export class TemsNotification extends utils.OrbitComponent {
  constructor() {
    super();
    utils.setupCacheInvalidation(this, {
      keywords: ["notifications", "inbox"],
    });
  }

  static styles = css`
    ${unsafeCSS(ComponentStyle)}
  `;

  cherryPickedProperties: PropertiesPicker[] = [
    { key: "@id", value: "@id" },
    { key: "@type", value: "@type" },
    { key: "author", value: "author", expand: true },
    { key: "name", value: "name" },
    { key: "first_name", value: "first_name" },
    { key: "last_name", value: "last_name" },
    { key: "account", value: "account", expand: true },
    { key: "picture", value: "picture" },
    { key: "object", value: "object", expand: true },
    { key: "title", value: "title" },
    { key: "type", value: "type" },
    { key: "summary", value: "summary" },
    { key: "date", value: "date" },
    { key: "unread", value: "unread" },
  ];

  _getResource = new Task(this, {
    task: async ([dataSrc]) => {
      if (
        !dataSrc ||
        !this.orbit ||
        (!this.noRouter &&
          this.route &&
          !this.route.startsWith(this.currentRoute))
      )
        return;
      if (!this.hasCachedDatas || this.oldDataSrc !== dataSrc) {
        this.datas = await this._getProxyValue(`${dataSrc}inbox/`);
        this.hasCachedDatas = true;
      }

      if (this.oldDataSrc !== dataSrc) {
        this.oldDataSrc = dataSrc;
      }

      return utils.sort(this.datas, "date", "desc");
    },
    args: () => [this.dataSrc, this.caching, this.currentRoute],
  });

  async markAsReadOrUnread(data: Resource, force = false) {
    await window.sibStore.patch(
      {
        unread: force ? false : !data.unread,
        "@context": data._originalResource?.serverContext,
      },
      data["@id"]
    );
    document.dispatchEvent(
      new CustomEvent("save", {
        detail: { resource: { "@id": data["@id"] } },
        bubbles: true,
      })
    );
  }

  private openNotification(e: Event, data: Resource) {
    this.markAsReadOrUnread(data, true);
    this._navigate(e);
  }

  render() {
    return (
      this.gatekeeper() ||
      this._getResource.render({
        pending: () => html`<solid-loader></solid-loader>`,
        complete: (datas) => {
          if (!datas) {
            return nothing;
          }
          return html`<tems-viewport>
            <tems-header slot="header" heading=${msg("Notifications")}
              ><div slot="cta">
                <tems-button
                  type="primary"
                  disabled=""
                  label=${msg("Mark all as read")}
                ></tems-button></div
            ></tems-header>
            <div slot="content" class="notifications">
              ${datas.length > 0
                ? datas.map(
                    (data) =>
                      html`<div
                        class="notification${data.unread ? " unread" : ""}"
                      >
                        ${data.author
                          ? html`<tems-avatar
                              .user="${data.author}"
                              class="author-image"
                            ></tems-avatar>`
                          : nothing}
                        <div class="notification-content">
                          ${data.object &&
                          (data.object.name || data.object.title) &&
                          (this.hasType(rdf.RDFTYPE_OBJECT, [data.object]) ||
                            this.hasType(rdf.RDFTYPE_DATAOFFER, [
                              data.object,
                            ]) ||
                            this.hasType(rdf.RDFTYPE_SERVICE, [data.object]) ||
                            this.hasType(rdf.RDFTYPE_PROVIDER, [data.object]))
                            ? html`<div
                                class="notification-author clickable"
                                @click=${(e: Event) =>
                                  this.openNotification(e, data)}
                                navigation-target=""
                                navigation-resource=${data.object["@id"]}
                                navigation-rdf-type=${data.object["@type"]?.at(
                                  -1
                                ) ?? data.object["@type"]}
                              >
                                ${data.object.name || data.object.title}
                              </div>`
                            : data.author
                            ? html`<div class="notification-author">
                                ${data.author.name}
                              </div>`
                            : nothing}
                          <div class="notification-summary">
                            ${data.summary}
                          </div>
                        </div>
                        <div class="notification-actions">
                          <div class="notification-date">
                            ${utils.formatDate(data.date, {
                              hour: "2-digit",
                              minute: "2-digit",
                              day: "2-digit",
                              month: "2-digit",
                              year: "2-digit",
                            })}
                          </div>
                          <div
                            @click="${() => this.markAsReadOrUnread(data)}"
                            class="read-link"
                          >
                            ${data.unread ? msg("Mark as read") : msg("Unread")}
                          </div>
                        </div>
                      </div>`
                  )
                : html`<div class="no-notifications">
                    <icon-mingcute-notification-line></icon-mingcute-notification-line>
                    <div>
                      <h3>${msg("Currently, nothing to report!")}</h3>
                      <p>
                        ${msg(
                          "This area will light with new notifications once there's activity in your workspaces."
                        )}
                      </p>
                    </div>
                  </div>`}
            </div>
          </tems-viewport>`;
        },
      })
    );
  }
}