import {
  DeesElement,
  html,
  property,
  customElement,
  css,
  type TemplateResult,
} from '@design.estate/dees-element';
import { idpElementStyles } from './tokens.js';
import './idp-icon.js';

export type TIdpButtonVariant = 'default' | 'secondary' | 'outline' | 'ghost' | 'destructive' | 'accent';
export type TIdpButtonSize = 'sm' | 'md' | 'lg';

declare global {
  interface HTMLElementTagNameMap {
    'idp-button': IdpButton;
  }
}

@customElement('idp-button')
export class IdpButton extends DeesElement {
  public static demo = () => html`
    <div style="display: flex; gap: 10px; flex-wrap: wrap;">
      <idp-button>Default</idp-button>
      <idp-button variant="accent">Approve</idp-button>
      <idp-button variant="outline">Deny</idp-button>
      <idp-button variant="ghost">Ghost</idp-button>
      <idp-button variant="destructive">Delete</idp-button>
    </div>
  `;
  public static demoGroups = ['idp.global v3 primitives'];

  @property({ type: String })
  public accessor variant: TIdpButtonVariant = 'default';

  @property({ type: String })
  public accessor size: TIdpButtonSize = 'md';

  @property({ type: String })
  public accessor icon = '';

  @property({ type: Boolean, reflect: true })
  public accessor disabled = false;

  public static styles = [
    ...idpElementStyles,
    css`
      :host {
        display: inline-block;
      }
      :host([disabled]) {
        pointer-events: none;
      }
      button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        border: 1px solid transparent;
        border-radius: 6px;
        font-family: var(--idp-font);
        font-weight: 500;
        letter-spacing: -0.01em;
        white-space: nowrap;
        cursor: pointer;
        transition: background 120ms ease, color 120ms ease, border-color 120ms ease, transform 80ms ease;
      }
      button:active:not(:disabled) {
        transform: translateY(1px);
      }
      button:focus-visible {
        outline: 2px solid color-mix(in srgb, var(--idp-accent), transparent 68%);
        outline-offset: 2px;
      }
      button:disabled {
        opacity: 0.5;
        cursor: not-allowed;
      }
      .sm {
        height: 32px;
        padding: 0 12px;
        font-size: 13px;
      }
      .md {
        height: 38px;
        padding: 0 14px;
        font-size: 14px;
      }
      .lg {
        height: 44px;
        padding: 0 18px;
        font-size: 15px;
      }
      .default {
        background: var(--idp-primary);
        color: var(--idp-primary-fg);
      }
      .default:hover:not(:disabled) {
        opacity: 0.88;
      }
      .accent {
        background: var(--idp-accent);
        color: #fff;
        box-shadow: 0 4px 14px color-mix(in srgb, var(--idp-accent), transparent 64%);
      }
      .accent:hover:not(:disabled) {
        background: var(--idp-accent-hover);
      }
      .secondary {
        background: var(--idp-muted);
        color: var(--idp-fg);
        border-color: var(--idp-border);
      }
      .outline {
        background: transparent;
        color: var(--idp-fg);
        border-color: var(--idp-border);
      }
      .outline:hover:not(:disabled), .secondary:hover:not(:disabled), .ghost:hover:not(:disabled) {
        background: var(--idp-muted);
      }
      .ghost {
        background: transparent;
        color: var(--idp-fg);
      }
      .destructive {
        background: var(--idp-destructive);
        color: #fff;
      }
      idp-icon {
        flex: 0 0 auto;
      }
    `,
  ];

  public render(): TemplateResult {
    return html`
      <button class="${this.variant} ${this.size}" ?disabled=${this.disabled} part="button">
        ${this.icon ? html`<idp-icon name=${this.icon as any} size="14"></idp-icon>` : html``}
        <slot></slot>
      </button>
    `;
  }
}