import { LitElement, html, nothing, css } from "lit";
import { customElement, property } from "lit/decorators.js";
import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
import { Message } from "@supersoniks/concorde/core/_types/types";
import { map } from "lit/directives/map.js";
import { Size } from "@supersoniks/concorde/core/components/ui/_css/size";

import { ifDefined } from "lit/directives/if-defined.js";
import { APIResult } from "@supersoniks/concorde/core/components/ui/toast/message-subscriber";

const tagName = "sonic-alert-messages";

//Superbe mix de multples versions d'api.
@customElement(tagName)
export class AlertMessages extends Subscriber(LitElement, {} as APIResult) {
  @property({ type: String }) size: Size = "md";
  @property({ type: Boolean }) background = false;
  @property({ type: Boolean }) noIcon = false;
  @property({ type: Array })
  messages: Array<Message> = [];

  static styles = [
    css`
      .container {
        display: grid;
        gap: 0.5em;
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
      }
    `,
  ];

  render() {
    if (!this.messages?.length) return nothing;

    return html`<div class="container">
      ${map(this.messages, (message) => {
        if (message.type == "public") {
          return html`<sonic-alert
            status=${message.status || "default"}
            text=${ifDefined(message.content)}
            size=${this.size}
            ?noIcon=${this.noIcon}
            ?background=${this.background}
          ></sonic-alert>`;
        } else return nothing;
      })}
    </div>`;
  }
}