catalog/ts_web/elements/00group-applauncher/eco-applauncher-batterymenu/eco-applauncher-batterymenu.ts

import {
  customElement,
  DeesElement,
  type TemplateResult,
  html,
  property,
  css,
  cssManager,
} from '@design.estate/dees-element';
import { DeesIcon } from '@design.estate/dees-catalog';
import { demo } from './eco-applauncher-batterymenu.demo.js';

// Ensure dees-icon is registered
DeesIcon;

declare global {
  interface HTMLElementTagNameMap {
    'eco-applauncher-batterymenu': EcoApplauncherBatterymenu;
  }
}

@customElement('eco-applauncher-batterymenu')
export class EcoApplauncherBatterymenu extends DeesElement {
  public static demo = demo;
  public static demoGroup = 'App Launcher';

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

      .menu-container {
        background: ${cssManager.bdTheme('#ffffff', 'hsl(240 6% 10%)')};
        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 90%)', 'hsl(240 5% 20%)')};
        border-radius: 12px;
        box-shadow: ${cssManager.bdTheme(
          '0 8px 32px rgba(0, 0, 0, 0.15)',
          '0 8px 32px rgba(0, 0, 0, 0.4)'
        )};
        min-width: 280px;
        overflow: hidden;
        opacity: 0;
        transform: scale(0.95) translateY(-8px);
        transition: all 0.2s ease-out;
        pointer-events: none;
      }

      :host([open]) .menu-container {
        opacity: 1;
        transform: scale(1) translateY(0);
        pointer-events: auto;
      }

      .battery-display {
        padding: 24px 16px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
      }

      .battery-visual {
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .battery-icon {
        position: relative;
        width: 80px;
        height: 36px;
        border: 2px solid ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 70%)')};
        border-radius: 6px;
        overflow: hidden;
      }

      .battery-icon::after {
        content: '';
        position: absolute;
        right: -6px;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 14px;
        background: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 70%)')};
        border-radius: 0 2px 2px 0;
      }

      .battery-fill {
        height: 100%;
        transition: width 0.3s ease, background 0.3s ease;
      }

      .battery-fill.good {
        background: hsl(142 71% 45%);
      }

      .battery-fill.medium {
        background: hsl(47 100% 50%);
      }

      .battery-fill.low {
        background: hsl(0 72% 51%);
      }

      .battery-fill.charging {
        background: linear-gradient(
          90deg,
          hsl(142 71% 45%) 0%,
          hsl(142 71% 55%) 50%,
          hsl(142 71% 45%) 100%
        );
        background-size: 200% 100%;
        animation: charging-pulse 1.5s ease-in-out infinite;
      }

      @keyframes charging-pulse {
        0% { background-position: 100% 0; }
        100% { background-position: -100% 0; }
      }

      .charging-icon {
        color: hsl(47 100% 50%);
      }

      .battery-percentage {
        font-size: 32px;
        font-weight: 600;
        color: ${cssManager.bdTheme('hsl(0 0% 10%)', 'hsl(0 0% 98%)')};
      }

      .battery-status {
        font-size: 14px;
        color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 60%)')};
        display: flex;
        align-items: center;
        gap: 6px;
      }

      .menu-divider {
        height: 1px;
        background: ${cssManager.bdTheme('hsl(0 0% 92%)', 'hsl(240 5% 15%)')};
      }

      .menu-option {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 16px;
        cursor: pointer;
        transition: background 0.15s ease;
      }

      .menu-option:hover {
        background: ${cssManager.bdTheme('hsl(0 0% 96%)', 'hsl(240 5% 15%)')};
      }

      .option-label {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 14px;
        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 90%)')};
      }

      .option-description {
        font-size: 12px;
        color: ${cssManager.bdTheme('hsl(0 0% 60%)', 'hsl(0 0% 50%)')};
        margin-top: 2px;
      }

      .toggle-switch {
        position: relative;
        width: 44px;
        height: 24px;
        background: ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(240 5% 25%)')};
        border-radius: 12px;
        cursor: pointer;
        transition: background 0.2s ease;
        flex-shrink: 0;
      }

      .toggle-switch.active {
        background: hsl(217 91% 60%);
      }

      .toggle-switch::after {
        content: '';
        position: absolute;
        top: 2px;
        left: 2px;
        width: 20px;
        height: 20px;
        background: white;
        border-radius: 50%;
        transition: transform 0.2s ease;
        box-shadow: ${cssManager.bdTheme('0 1px 3px rgba(0,0,0,0.2)', 'none')};
      }

      .toggle-switch.active::after {
        transform: translateX(20px);
      }

      .menu-footer {
        padding: 12px 16px;
        border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 92%)', 'hsl(240 5% 15%)')};
      }

      .settings-link {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 14px;
        color: hsl(217 91% 60%);
        cursor: pointer;
        transition: color 0.15s ease;
      }

      .settings-link:hover {
        color: hsl(217 91% 50%);
      }
    `,
  ];

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

  @property({ type: Number })
  accessor batteryLevel = 100;

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

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

  @property({ type: String })
  accessor timeRemaining: string | null = null;

  private boundHandleClickOutside = this.handleClickOutside.bind(this);

  public render(): TemplateResult {
    const fillClass = this.getFillClass();

    return html`
      <div class="menu-container">
        <div class="battery-display">
          <div class="battery-visual">
            <div class="battery-icon">
              <div
                class="battery-fill ${fillClass} ${this.isCharging ? 'charging' : ''}"
                style="width: ${this.batteryLevel}%"
              ></div>
            </div>
            ${this.isCharging ? html`
              <dees-icon class="charging-icon" .icon=${'lucide:zap'} .iconSize=${24}></dees-icon>
            ` : ''}
          </div>
          <div class="battery-percentage">${this.batteryLevel}%</div>
          <div class="battery-status">
            ${this.isCharging ? html`
              <dees-icon .icon=${'lucide:plug'} .iconSize=${14}></dees-icon>
              Charging
            ` : this.timeRemaining ? html`
              <dees-icon .icon=${'lucide:clock'} .iconSize=${14}></dees-icon>
              ${this.timeRemaining}
            ` : html`
              <dees-icon .icon=${'lucide:battery'} .iconSize=${14}></dees-icon>
              On Battery
            `}
          </div>
        </div>

        <div class="menu-divider"></div>

        <div class="menu-option" @click=${this.handleBatterySaverToggle}>
          <div class="option-label">
            <dees-icon .icon=${'lucide:leaf'} .iconSize=${18}></dees-icon>
            <div>
              <div>Battery Saver</div>
              <div class="option-description">Extends battery life</div>
            </div>
          </div>
          <div
            class="toggle-switch ${this.batterySaverEnabled ? 'active' : ''}"
            @click=${(e: Event) => e.stopPropagation()}
          ></div>
        </div>

        <div class="menu-footer">
          <div class="settings-link" @click=${this.handleSettingsClick}>
            <dees-icon .icon=${'lucide:settings'} .iconSize=${14}></dees-icon>
            Power Settings...
          </div>
        </div>
      </div>
    `;
  }

  private getFillClass(): string {
    if (this.batteryLevel > 50) return 'good';
    if (this.batteryLevel > 20) return 'medium';
    return 'low';
  }

  private handleBatterySaverToggle(): void {
    this.batterySaverEnabled = !this.batterySaverEnabled;
    this.dispatchEvent(new CustomEvent('battery-saver-toggle', {
      detail: { enabled: this.batterySaverEnabled },
      bubbles: true,
      composed: true,
    }));
  }

  private handleSettingsClick(): void {
    this.dispatchEvent(new CustomEvent('settings-click', {
      bubbles: true,
      composed: true,
    }));
  }

  private handleClickOutside(e: MouseEvent): void {
    if (this.open && !this.contains(e.target as Node)) {
      this.open = false;
      this.dispatchEvent(new CustomEvent('menu-close', {
        bubbles: true,
        composed: true,
      }));
    }
  }

  async connectedCallback(): Promise<void> {
    await super.connectedCallback();
    setTimeout(() => {
      document.addEventListener('click', this.boundHandleClickOutside);
    }, 0);
  }

  async disconnectedCallback(): Promise<void> {
    await super.disconnectedCallback();
    document.removeEventListener('click', this.boundHandleClickOutside);
  }
}