import { html } from "lit";
import '../../../define/ui/ui-radio.js';
import '../../../define/ui/ui-button.js';
import { Events } from "../../../events/Events.js";
var PageState;
(function (PageState) {
    PageState[PageState["default"] = 0] = "default";
    PageState[PageState["initializing"] = 1] = "initializing";
    PageState[PageState["initialized"] = 2] = "initialized";
})(PageState || (PageState = {}));
/**
 * A page for suite settings
 */
export class SettingsPage {
    constructor(screen) {
        this.screen = screen;
        this.state = PageState.default;
        this.theme = 'default';
        this.handleTheme = this.handleTheme.bind(this);
    }
    async initialize() {
        if (this.state === PageState.initializing) {
            return;
        }
        const theme = await this.screen.bindings.config.local.get('theme');
        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) {
        const radio = e.target;
        const { checked, value } = radio;
        if (!checked) {
            return;
        }
        this.selectTheme(value);
    }
    async selectTheme(value) {
        await this.screen.bindings.config.local.set('theme', value);
    }
    handleManageConnections() {
        Events.Navigation.Store.config();
    }
    render() {
        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() {
        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() {
        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>
    `;
    }
    renderStoreData(env) {
        const { source } = env;
        return html `
    ${this.renderStoreIntro(source)}
    `;
    }
    renderStoreIntro(source) {
        let message;
        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() {
        return html `
    <p class="body-large">Reading configuration...</p>
    `;
    }
    renderNoStore() {
        return html `
    <p class="body-large">Unable to read store configuration.</p>
    `;
    }
}
//# sourceMappingURL=Settings.page.js.map