import { html, LitElement, css } from "lit";
import { customElement, property } from "lit/decorators.js";
import { styleMap } from "lit/directives/style-map.js";
const tagName = "sonic-image";
@customElement(tagName)
export class Image extends LitElement {
  static styles = [
    css`
      :host {
        --sc-img-radius: 0;
        --sc-img-bg: var(--sc-placeholder-bg, rgba(12, 12, 12, 0.05));
        border-radius: var(--sc-img-radius);
        display: block;
        width: 100%;
        background: var(--sc-img-bg);
      }

      img {
        width: 100%;
        vertical-align: middle;
        object-fit: cover;
      }

      img[src=""] {
        visibility: hidden;
      }

      /*Rounded*/
      :host([rounded]) {
        --sc-img-radius: var(--sc-rounded);
        overflow: hidden;
      }
      :host([rounded="sm"]) {
        --sc-img-radius: var(--sc-rounded-sm);
      }

      :host([rounded="md"]) {
        --sc-img-radius: var(--sc-rounded-md);
      }

      :host([rounded="lg"]) {
        --sc-img-radius: var(--sc-rounded-lg);
      }
      :host([rounded="xl"]) {
        --sc-img-radius: var(--sc-rounded-xl);
      }

      /*Cercle*/
      :host([rounded="full"]) {
        --sc-img-radius: 50% !important;
      }
      :host([rounded="none"]) {
        --sc-img-radius: 0 !important;
      }

      :host([cover]),
      :host([cover]) > div,
      :host([cover]) img {
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        height: 100% !important;
        width: 100% !important;
      }

      :host([transition]) img {
        opacity: 0;
        transition: 0.25s;
      }

      :host([transition="fade-scale-out"]) img {
        scale: 1.08;
        transition: opacity 0.3s linear,
          scale 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      }
      :host([transition]) img.loaded {
        opacity: 1;
        scale: 1;
      }
    `,
  ];

  @property({ type: String }) rounded:
    | ""
    | "none"
    | "full"
    | "sm"
    | "md"
    | "lg" = "none";
  @property({ type: String }) src = "";
  @property({ type: String }) alt = "";
  @property({ type: String }) loading: "eager" | "lazy" = "lazy";
  @property({ type: String, reflect: true }) transition?:
    | "fade"
    | "fade-scale-out";
  @property({ type: String }) ratio = "auto";
  @property({ type: String }) objectPosition = "center center";
  @property({ type: String }) imageRendering = "auto";
  @property({ type: Boolean, reflect: true }) cover = false;

  firstUpdated(
    changedProperties: Map<string | number | symbol, unknown>
  ): void {
    if (this.transition) {
      const img = this.shadowRoot?.querySelector("img");
      if (!img) return;
      img.onload = function () {
        img.classList.add("loaded");
      };
    }
    super.firstUpdated(changedProperties);
  }

  render() {
    const imgStyles = {
      aspectRatio: this.cover ? "auto" : this.ratio,
      imageRendering: this.imageRendering,
      objectPosition: this.objectPosition,
    };
    return html`<div part="image">
      <picture part="picture"
        ><img
          part="img"
          src="${this.src}"
          loading="${this.loading}"
          alt="${this.alt}"
          style=${styleMap(imgStyles)}
      /></picture>
    </div>`;
  }
}