import { LitElement, html, css } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
import { Theme } from '../theme';
import { getBrandConfig } from '../brand-config';

@customElement('logo-component')
export class LogoComponent extends LitElement {
  @property({ type: String })
  alt = getBrandConfig().name;

  @property({ type: String, attribute: 'override-theme' })
  themeOverride?: Theme;

  @state()
  private theme: 'light' | 'dark' = 'dark';

  static styles = css`
    :host {
      display: block;
      height: 35px;
    }

    img {
      height: 100%;
    }
  `;

  connectedCallback() {
    super.connectedCallback();
    if (this.themeOverride) {
      this.setTheme(this.themeOverride);
    } else {
      this.setThemeFromClass();
      window.addEventListener('theme-change', this.handleThemeChange);
    }
  }

  disconnectedCallback() {
    super.disconnectedCallback();
    window.removeEventListener('theme-change', this.handleThemeChange);
  }

  private handleThemeChange = (event: CustomEvent) => {
    this.setTheme(event.detail.theme);
  };

  private setTheme(theme: Theme) {
    if (theme === 'system') {
      const prefersDark = window.matchMedia(
        '(prefers-color-scheme: dark)'
      ).matches;
      this.theme = prefersDark ? 'dark' : 'light';
    } else if (theme === 'dark' || theme === 'light') {
      this.theme = theme;
    }
  }

  private setThemeFromClass() {
    if (document.documentElement.classList.contains('sl-theme-dark')) {
      this.theme = 'dark';
    } else if (document.documentElement.classList.contains('sl-theme-light')) {
      this.theme = 'light';
    } else {
      // Fallback to system preference if no class is set
      this.setTheme('system');
    }
  }

  render() {
    const brandConfig = getBrandConfig();
    const logoSrc =
      this.theme === 'dark'
        ? brandConfig.branding.logo_dark
        : brandConfig.branding.logo_light;
    return html`<img src="${logoSrc}" alt=${this.alt} />`;
  }
}
