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

declare global {
  interface HTMLElementTagNameMap {
    'dees-panel': DeesPanel;
  }
}

@customElement('dees-panel')
export class DeesPanel extends DeesElement {
  public static demo = demoFunc;

  @property({ type: String })
  public title: string = '';

  @property({ type: String })
  public subtitle: string = '';

  public static styles = [
    cssManager.defaultStyles,
    css`
      :host {
        display: block;
        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(215 20.2% 11.8%)')};
        border-radius: 8px;
        padding: 24px;
        border: 1px solid ${cssManager.bdTheme('hsl(214.3 31.8% 91.4%)', 'hsl(215 20.2% 16.8%)')};
        box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
      }

      .title {
        margin: 0 0 8px 0;
        font-size: 18px;
        font-weight: 600;
        color: ${cssManager.bdTheme('hsl(215.3 25% 8.8%)', 'hsl(210 40% 98%)')};
        letter-spacing: -0.025em;
      }

      .subtitle {
        margin: 0 0 16px 0;
        font-size: 14px;
        color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
        letter-spacing: -0.01em;
      }

      .content {
        color: ${cssManager.bdTheme('hsl(215.3 25% 8.8%)', 'hsl(210 40% 98%)')};
      }

      /* Remove margins from first and last children */
      .content ::slotted(*:first-child) {
        margin-top: 0;
      }

      .content ::slotted(*:last-child) {
        margin-bottom: 0;
      }
    `,
  ];

  public render(): TemplateResult {
    return html`
      ${this.title ? html`<h3 class="title">${this.title}</h3>` : ''}
      ${this.subtitle ? html`<p class="subtitle">${this.subtitle}</p>` : ''}
      <div class="content">
        <slot></slot>
      </div>
    `;
  }
}