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

import * as domtools from '@design.estate/dees-domtools';
import { demoFunc } from './dees-button-group.demo.js';

declare global {
  interface HTMLElementTagNameMap {
    'dees-button-group': DeesButtonGroup;
  }
}

@customElement('dees-button-group')
export class DeesButtonGroup extends DeesElement {
  public static demo = demoFunc;

  @property()
  public label: string = '';

  @property()
  public direction: 'horizontal' | 'vertical' = 'horizontal';

  constructor() {
    super();
    domtools.elementBasic.setup();
  }

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

      .button-group {
        display: flex;
        gap: 8px;
        align-items: center;
        padding: 8px;
        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.05)')};
        border-radius: 6px;
      }

      .button-group.vertical {
        flex-direction: column;
        align-items: stretch;
      }

      .label {
        color: ${cssManager.bdTheme('#666', '#999')};
        font-size: 12px;
        font-family: 'Geist Sans', sans-serif;
        margin-right: 8px;
        white-space: nowrap;
      }

      .button-group.vertical .label {
        margin-right: 0;
        margin-bottom: 8px;
      }

      ::slotted(*) {
        margin: 0 !important;
      }
    `,
  ];

  public render(): TemplateResult {
    return html`
      <div class="button-group ${this.direction}">
        ${this.label ? html`<span class="label">${this.label}</span>` : ''}
        <slot></slot>
      </div>
    `;
  }
}