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

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

declare global {
  interface HTMLElementTagNameMap {
    'dees-mobile-header': DeesMobileHeader;
  }
}

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

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

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

  public static styles = [
    cssManager.defaultStyles,
    mobileComponentStyles,
    css`
      :host {
        display: block;
        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
        border-bottom: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
        position: relative;
      }

      .header {
        /* Mobile-first defaults */
        height: 4rem;
        padding: 0 1rem;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        max-width: 768px;
        margin: 0 auto;
        box-sizing: border-box;
      }

      /* Desktop enhancements */
      @media (min-width: 641px) {
        .header {
          height: 5rem;
          padding: 0 1.25rem;
          gap: 1rem;
        }
      }

      .left-action {
        flex-shrink: 0;
        margin-left: -0.5rem;
      }

      .left-action:empty {
        display: none;
      }

      .left-action ::slotted(*) {
        width: 2.5rem;
        height: 2.5rem;
      }

      .content {
        flex: 1;
        min-width: 0;
      }

      .middle {
        flex-shrink: 0;
        display: flex;
        align-items: center;
      }

      .middle:empty {
        display: none;
      }

      h1 {
        /* Mobile-first defaults */
        font-size: 1rem;
        font-weight: 600;
        margin: 0;
        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.2;
      }

      /* Desktop enhancements */
      @media (min-width: 641px) {
        h1 {
          font-size: 1.125rem;
        }
      }

      .subtitle {
        /* Mobile-first defaults */
        font-size: 0.8125rem;
        margin: 0.125rem 0 0;
        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
        line-height: 1.3;
      }

      /* Desktop enhancements */
      @media (min-width: 641px) {
        .subtitle {
          font-size: 0.875rem;
          margin: 0.25rem 0 0;
        }
      }

      .actions {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
      }

      ::slotted([slot="actions"]) {
        width: 2.5rem;
        height: 2.5rem;
        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
        display: block;
      }

      ::slotted([slot="actions"]:hover) {
        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
        background: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
        border-radius: 4px;
      }
    `,
  ];

  public render(): TemplateResult {
    return html`
      <header class="header">
        <div class="left-action">
          <slot name="left-action"></slot>
        </div>
        <div class="content">
          <slot name="content">
            <h1>${this.title}</h1>
            ${this.subtitle ? html`<div class="subtitle">${this.subtitle}</div>` : ''}
          </slot>
        </div>

        <div class="middle">
          <slot name="middle"></slot>
        </div>

        <div class="actions">
          <slot name="actions"></slot>
        </div>
      </header>
    `;
  }
}