import { html, LitElement } from "lit";
import { customElement, property } from "lit/decorators.js";
import { Modal } from "@supersoniks/concorde/core/components/ui/modal/modal";
import { ifDefined } from "lit/directives/if-defined.js";
import HTML from "@supersoniks/concorde/core/utils/HTML";
import { ButtonType } from "../button/button";
const tagName = "sonic-modal-close";

@customElement(tagName)
export class ModalClose extends LitElement {
  @property() translation: Record<string, string> = {
    fr: "Fermer la fenêtre",
    en: "Close window",
    de: "Fenster schließen",
    nl: "Venster sluiten",
    es: "Cerrar",
  };

  @property() reset?: string;
  @property() type?: ButtonType;

  connectedCallback() {
    super.connectedCallback();
    this.lang = document.documentElement.lang?.split("-")[0] ?? "fr";
  }
  render() {
    return html`<sonic-button
      noAutoFill
      data-aria-label=${this.translation[this.lang]}
      reset=${ifDefined(this.reset)}
      shape="circle"
      @click=${this.handleClick}
      type=${ifDefined(this.type)}
      ><sonic-icon name="cancel" size="lg"></sonic-icon
    ></sonic-button>`;
  }

  handleClick() {
    const parentModal = HTML.getClosestElement(this, "sonic-modal") as Modal;
    parentModal.hide();
  }
}