import {
  DeesElement,
  css,
  cssManager,
  customElement,
  html,
  property,
  type TemplateResult,
} from '@design.estate/dees-element';

import { mobileComponentStyles } from '../../00componentstyles.js';
import { demoFunc } from './dees-mobile-iconbutton.demo.js';

declare global {
  interface HTMLElementTagNameMap {
    'dees-mobile-iconbutton': DeesMobileIconbutton;
  }
}

@customElement('dees-mobile-iconbutton')
export class DeesMobileIconbutton extends DeesElement {
  public static demo = demoFunc;

  @property({ type: String })
  accessor label: string = '';

  @property({ type: Boolean })
  accessor disabled: boolean = false;

  @property({ type: String })
  accessor size: 'sm' | 'md' | 'lg' = 'md';

  public static styles = [
    cssManager.defaultStyles,
    mobileComponentStyles,
    css`
      :host {
        display: inline-block;
      }

      button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: none;
        border-radius: 0.375rem;
        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
        cursor: pointer;
        transition: all 150ms ease;
        transform: scale(1);
        position: relative;
        -webkit-tap-highlight-color: transparent;
        width: 100%;
        height: 100%;
      }

      button:hover:not(:disabled) {
        background-color: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
        transform: scale(1.1);
      }

      button:active:not(:disabled) {
        transform: scale(0.95);
      }

      button:focus-visible {
        outline: 2px solid ${cssManager.bdTheme('#3b82f6', '#60a5fa')};
        outline-offset: 2px;
      }

      button:disabled {
        opacity: 0.5;
        cursor: not-allowed;
      }

      /* Sizes */
      button.sm {
        width: 2rem;
        height: 2rem;
      }

      button.md {
        width: 2.5rem;
        height: 2.5rem;
      }

      button.lg {
        width: 3rem;
        height: 3rem;
      }

      ::slotted(svg),
      ::slotted(div),
      ::slotted(dees-mobile-icon) {
        width: 1.25rem;
        height: 1.25rem;
        pointer-events: none;
      }

      button.sm ::slotted(svg),
      button.sm ::slotted(div),
      button.sm ::slotted(dees-mobile-icon) {
        width: 1rem;
        height: 1rem;
      }

      button.lg ::slotted(svg),
      button.lg ::slotted(div),
      button.lg ::slotted(dees-mobile-icon) {
        width: 1.5rem;
        height: 1.5rem;
      }
    `,
  ];

  public render(): TemplateResult {
    return html`
      <button
        class=${this.size}
        ?disabled=${this.disabled}
        aria-label=${this.label}
        title=${this.label}
      >
        <slot></slot>
      </button>
    `;
  }
}