import { html, LitElement, css } from "lit";
import { customElement, property } from "lit/decorators.js";
import {
  fontSize,
  Size,
} from "@supersoniks/concorde/core/components/ui/_css/size";

const tagName = "sonic-badge";
/**
 * Un badge simple avec deux slots, un nommé prefix et un nomé suffix de manière à pouvoir mettre (par exemple) une icone avant ou après le contenu.
 * * Le badge est comparable au bouton car il possèdent tous les deux les propriétés *type* (primary...), *variant*(outline, ghost), size(xs...)...
 * * Le badge n'est pas interactif contrairement au bouton
 */
@customElement(tagName)
export class Badge extends LitElement {
  static styles = [
    fontSize,
    css`
      :host {
        --sc-badge-gap: 0.3em;
        --sc-badge-py: 0.35em;
        --sc-badge-px: 0.67em;

        --sc-badge-color: var(--sc-base-content, #000);
        --sc-badge-bg: var(--sc-base-100, rgba(0, 0, 0, 0.07));

        /*--sc-badge-border-width: var(--sc-form-border-width, 0.1rem);*/
        --sc-badge-border-width: 1px;
        --sc-badge-border-color: transparent;
        --sc-badge-border: var(--sc-badge-border-width) solid
          var(--sc-badge-border-color);

        --sc-badge-rounded: 0.85em;
        --sc-badge-fw: var(--sc-font-weight-base, 400);

        display: inline-flex;
        align-items: center;
        box-sizing: border-box;
        line-height: var(--sc-_lh);
        border-radius: var(--sc-badge-rounded);

        background: var(--sc-badge-bg);
        color: var(--sc-badge-color);
        font-family: var(--sc-badge-ff, var(--sc-font-family-base, sans-serif));
        font-weight: var(--sc-badge-fw);
        line-height: 1;

        padding-top: var(--sc-badge-py);
        padding-bottom: var(--sc-badge-py);
        padding-left: var(--sc-badge-px);
        padding-right: var(--sc-badge-px);
        /**Round pour lissage px */
        min-height: round(calc(var(--sc-badge-px) * 2), 1px);
        min-width: round(calc(var(--sc-badge-px) * 2), 1px);
        border: var(--sc-badge-border);
        -webkit-print-color-adjust: exact;
      }

      /*TYPES*/
      :host([type="primary"]) {
        --sc-badge-color: var(--sc-primary-content, var(--sc-base, #fff));
        --sc-badge-bg: var(--sc-primary, var(--sc-base-content, #000));
      } 
      :host([type="warning"]) {
        --sc-badge-color: var(--sc-warning-content, var(--sc-base, #fff));
        --sc-badge-bg: var(--sc-warning, var(--sc-base-content, #000));
      }
      :host([type="danger"]) {
        --sc-badge-color: var(--sc-danger-content, var(--sc-base, #fff));
        --sc-badge-bg: var(--sc-danger, var(--sc-base-content, #000));
      }
      :host([type="info"]) {
        --sc-badge-color: var(--sc-info-content, var(--sc-base, #fff));
        --sc-badge-bg: var(--sc-info, var(--sc-base-content, #000));
      }
      :host([type="success"]) {
        --sc-badge-color: var(--sc-success-content, var(--sc-base, #fff));
        --sc-badge-bg: var(--sc-success, var(--sc-base-content, #000));
      }
      :host([type="neutral"]) {
        --sc-badge-color: var(--sc-base, #fff);
        --sc-badge-bg: var(--sc-base-content, #000);
      }

      :host([contrast]),
      :host([type="contrast"]) {
        --sc-badge-color: var(--sc-contrast-content, #fff);
        --sc-badge-bg: var(--sc-contrast, #000);
      }

      /*SIZE*/
      :host {
        gap: var(--sc-badge-gap);
      }

      :host([size="2xs"]),
      :host([size="xs"]),
      :host([size="sm"]) {
        --sc-badge-gap: 0.35em;
      }

      :host([size="lg"]),
      :host([size="xl"]) {
        --sc-_lh: 1.2;
        --sc-badge-gap: 0.5em;
      }

      /*OUTLINE*/
      :host([variant="outline"][type]) {
        border-width: var(--sc-badge-border-width) !important;
        border-color: var(--sc-badge-bg);
        color: var(--sc-badge-bg);
        background: transparent;
      }

      :host([variant="outline"][type="default"]) {
        border-color: var(--sc-base-content, #000);
        color: var(--sc-base-content, #000);
        background: transparent;
      }

      /*GHOST*/
      :host([variant="ghost"][type]) {
        color: var(--sc-badge-bg);
        background: transparent;
        padding: 0;
      }

      @media (forced-colors: active) {
        :host([variant="ghost"][type]) {
          padding: var(--sc-badge-py) var(--sc-badge-px);
        }
      }

      :host([variant="ghost"][type="default"]) {
        color: var(--sc-badge-color);
        background: transparent;
      }

      :host([ellipsis]) {
        flex-wrap: nowrap;
        white-space: nowrap;
        max-width: 100%;
      }

      :host([ellipsis]) slot {
        overflow: hidden;
        display: block;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 100%;
      }

      slot[name="suffix"],
      slot[name="prefix"] {
        flex-shrink: 0;
      }
    `,
  ];

  /**
   * Le type change surtout la couleur composant
   */
  @property({ type: String, reflect: true })
  type:
    | "default"
    | "primary"
    | "warning"
    | "danger"
    | "success"
    | "info"
    | "contrast"
    | "neutral" = "default";
  /**
   * Le composant par defaut sans se paramètre à forte afordance
   * * ghost : composant super léger visuellement
   * * outline : composant légé avec une bordure
   */
  @property({ type: String, reflect: true }) variant:
    | "default"
    | "outline"
    | "ghost" = "default";

  /**
   * Taille du composant, implique notamment des modifications de typo et de marge interne
   */
  @property({ type: String, reflect: true }) size?: Size;
  @property({ type: Boolean, reflect: true }) ellipsis = false;

  render() {
    return html`
      <slot name="prefix"></slot>
      <slot></slot>
      <slot name="suffix"></slot>
    `;
  }
}