/**
 * @module infra-sk/modules/theme-chooser-sk
 * @description <h2><code>theme-chooser-sk</code></h2>
 *
 * <p>
 * The <theme-chooser-sk> custom element. Imports a default and darkmode color
 * palette and provides a toggle to swap between them.  To use the themes,
 * elements in the page should set colors via the variable provided in
 * infra-sk/modules/theme-chooser-sk/theme-chooser-sk.scss Such as --primary,
 * --on-primary, --background, --on-background, etc.  Some additional classes
 * are provided for convenience (primary-container-theme-sk,
 * secondary-container-theme-sk, surface, etc)
 * </p>
 *
 * <p>
 * To change the color themes override the css variables in a ':root' selector.
 * </p>
 *
 * @attr dark - If this attribute is set during connectedCallback then the
 *   default mode will be dark.
 *
 * @evt theme-chooser-toggle Sent when the theme has changed. The detail
 *   contains the darkmode value:
 *
 *   <pre>
 *     detail {
 *       darkmode: true,
 *     }
 *   </pre>
 *
 */
import { define } from 'elements-sk/define';
import { html } from 'lit-html';
import { ElementSk } from '../ElementSk';
import 'elements-sk/icon/invert-colors-icon-sk';

const DARKMODE_DEFAULT_ATTRIBUTE = 'dark';

/** Class applied to <body> to enable darkmode, and the key in localstorage to persist it. */
export const DARKMODE_CLASS = 'darkmode';

/** Describes the "theme-chooser-toggle" event detail. */
export interface ThemeChooserSkEventDetail {
  readonly darkmode: boolean;
}

// TODO(weston): Add logic to optionally automatically compute the --on-* colors to white or black
//               based on color brightness for accessibility.
export class ThemeChooserSk extends ElementSk {
  constructor() {
    super(ThemeChooserSk.template);
  }

  private static template = () => html`<invert-colors-icon-sk></invert-colors-icon-sk>`;

  connectedCallback(): void {
    super.connectedCallback();
    this._render();
    this.addEventListener('click', this._toggleTheme);

    // Set the class correctly based on window.localStorage.
    this.darkmode = this.darkmode; // eslint-disable-line no-self-assign
  }

  private _toggleTheme() {
    this.darkmode = !this.darkmode;
  }

  get darkmode(): boolean {
    // If localstore has never been set then return the default, which depends
    // on the 'dark' attribute.
    if (window.localStorage.getItem(DARKMODE_CLASS) === null) {
      return this.hasAttribute(DARKMODE_DEFAULT_ATTRIBUTE);
    }
    return window.localStorage.getItem(DARKMODE_CLASS) === 'true';
  }

  set darkmode(val: boolean) {
    // Force to be a bool.
    val = !!val;
    window.localStorage.setItem(DARKMODE_CLASS, val.toString());
    document.body.classList.toggle(DARKMODE_CLASS, this.darkmode);
    this.dispatchEvent(
      new CustomEvent<ThemeChooserSkEventDetail>('theme-chooser-toggle', {
        detail: { darkmode: val },
        bubbles: true,
      }),
    );
  }
}

// isDarkMode returns true if the application is currently set to darkmode.
//
// Note that this function is only valid after the theme-chooser-sk element has
// finished connectedCallback().
export const isDarkMode = (): boolean => window.localStorage.getItem(DARKMODE_CLASS) === 'true';

define('theme-chooser-sk', ThemeChooserSk);