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

const tagName = "sonic-progress";

@customElement(tagName)
export class Progress extends LitElement {
  static styles = [
    fontSize,
    css`
      :host {
        --sc-progress-bg: var(
          --sc-input-bg,
          var(--sc-base-100, rgba(0, 0, 0, 0.07))
        );
        --sc-progress-color: var(--sc-base-content, #000);
        --sc-progress-height: 0.6em;
        --sc-progress-fs: var(--sc-_fs, 1rem);
        --sc-progress-fw: 500;
        --sc-progress-rounded: var(--sc-rounded-lg);
        display: block;
        line-height: 1.2;
        font-weight: var(--sc-progress-fw);
        font-size: var(--sc-progress-fs);
      }

      progress {
        display: block;
        position: relative;
        width: 100%;
        -webkit-appearance: none;
        appearance: none;
        overflow: hidden;
        border: none;
        height: var(--sc-progress-height);
        border-radius: var(--sc-progress-rounded);
        background-color: var(--sc-progress-bg);
        color: var(--sc-progress-color);
      }
      progress::-moz-progress-bar {
        background-color: var(--sc-progress-color);
        border-radius: var(--sc-progress-rounded);
      }

      progress:not([value])::-moz-progress-bar {
        background-color: var(--sc-progress-bg);
      }

      progress::-webkit-progress-bar {
        background-color: var(--sc-progress-bg);
      }
      progress::-webkit-progress-value {
        background-color: var(--sc-progress-color);
        border-radius: var(--sc-progress-rounded);
      }

      /* Indeterminate */
      progress:indeterminate:after {
        background-color: var(--sc-progress-color);
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: -40%;
        width: 33.333333%;
        border-radius: var(--sc-progress-rounded);
        animation: progress-loading 3s infinite ease-in-out;
      }

      @keyframes progress-loading {
        50% {
          left: 107%;
        }
      }

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

      :host([type="invert"]) {
        --sc-progress-bg: rgba(190, 190, 190, 0.125);
        --sc-progress-color: var(--sc-base, #fff);
      }

      :host([invert]) {
        --sc-progress-bg: rgba(190, 190, 190, 0.125);
      }

      :host([type="default"][invert]) {
        --sc-progress-color: var(--sc-base, #fff);
      }

      slot[name="remaining"] {
        font-weight: var(--sc-font-weight-base, 400);
        font-size: 0.85em;
        margin-top: 0.5em;
      }
      slot[name="remaining"]::slotted(*) {
        margin-left: auto;
      }

      slot:not([name]) {
        color: var(--sc-progress-color);
      }

      .slot-container {
        display: flex;
        justify-content: space-between;
        gap: 0.5em;
        margin-top: 0.15em;
      }
    `,
  ];

  @property({ type: Number }) value?: number;
  @property({ type: Number }) max = 100;
  @property({ type: Boolean }) invert = false;

  @property({ type: String, reflect: true })
  type:
    | "default"
    | "primary"
    | "warning"
    | "danger"
    | "success"
    | "info"
    | "invert" = "default";

  @property({ type: String, reflect: true }) size?: Size;

  render() {
    return html`
      <progress value=${ifDefined(this.value)} max=${this.max}></progress>
      <div class="slot-container">
        <slot></slot>
        <slot name="remaining"></slot>
      </div>
    `;
  }
}