import { html, TemplateResult } from "lit";
import { DataSourceType, IConfigEnvironment, ThemeType } from "../../../lib/config/Config.js";
import type ApiClientScreen from "../ApiClient.screen.js";
import RadioElement from "../../../ui/input/RadioElement.js";
import '../../../define/ui/ui-radio.js';
import '../../../define/ui/ui-button.js';
import { Events } from "../../../events/Events.js";

enum PageState {
  default,
  initializing,
  initialized,
}

/**
 * A page for suite settings
 */
export class SettingsPage {
  state: PageState = PageState.default;

  theme: ThemeType = 'default';

  env?: IConfigEnvironment;

  constructor(protected screen: ApiClientScreen) {
    this.handleTheme = this.handleTheme.bind(this);
  }

  async initialize(): Promise<void> {
    if (this.state === PageState.initializing) {
      return;
    }
    const theme = await this.screen.bindings.config.local.get('theme') as ThemeType | undefined;
    if (theme) {
      this.theme = theme;
    }
    try {
      this.env = await this.screen.bindings.store.global.get();
    } catch (e) {
      // ...
    }
    this.state = PageState.initialized;
    this.screen.render();
  }

  handleTheme(e: Event): void {
    const radio = e.target as RadioElement;
    const { checked, value } = radio;
    if (!checked) {
      return;
    }
    this.selectTheme(value as ThemeType);
  }

  async selectTheme(value: ThemeType): Promise<void> {
    await this.screen.bindings.config.local.set('theme', value);
  }
  
  handleManageConnections(): void {
    Events.Navigation.Store.config();
  }

  render(): TemplateResult {
    if (this.state !== PageState.initialized) {
      this.initialize();
      return this.renderLoading();
    }
    return html`
    <div class="section-header">
      <h2 class="headline-small">Settings</h2>
    </div>
    ${this.renderThemeSettings()}
    ${this.renderStoreSettings()}
    `;
  }

  renderThemeSettings(): TemplateResult {
    const { theme } = this;
    return html`
    <div class="settings-section">
      <h3 class="title-medium">Theme</h3>
      <div class="radio-row">
        <label class="label-medium">
          <ui-radio name="theme" value="default" .checked="${theme === 'default'}" @change="${this.handleTheme}"></ui-radio>
          System default
        </label>
      </div>
      <div class="radio-row">
        <label class="label-medium">
          <ui-radio name="theme" value="light" .checked="${theme === 'light'}" @change="${this.handleTheme}"></ui-radio>
          Light theme
        </label>
      </div>
      <div class="radio-row">
        <label class="label-medium">
          <ui-radio name="theme" value="dark" .checked="${theme === 'dark'}" @change="${this.handleTheme}"></ui-radio>
          Dark theme
        </label>
      </div>
    </div>
    `;
  }

  renderStoreSettings(): TemplateResult {
    const { env } = this;
    return html`
     <div class="settings-section">
      <h3 class="title-medium">Store settings</h3>
      ${env ? this.renderStoreData(env) : this.renderNoStore()}

      <div>
        <ui-button type="outlined" @click="${this.handleManageConnections}">Manage connections</ui-button>
        <ui-button type="text">Learn more</ui-button>
      </div>
    </div>
    `;
  }

  protected renderStoreData(env: IConfigEnvironment): TemplateResult {
    const { source } = env;
    return html`
    ${this.renderStoreIntro(source)}
    `;
  }

  protected renderStoreIntro(source: DataSourceType): TemplateResult {
    let message: string;
    if (source === 'local-store') {
      message = 'You are using a local store service.';
    } else {
      message = 'You are connected to a network store.';
    }
    return html`<p class="body-large">${message}</p>`
  }

  renderLoading(): TemplateResult {
    return html`
    <p class="body-large">Reading configuration...</p>
    `;
  }

  renderNoStore(): TemplateResult {
    return html`
    <p class="body-large">Unable to read store configuration.</p>
    `;
  }
}
