import { __decorate } from "tslib";
/* eslint-disable class-methods-use-this */
import { html } from 'lit';
import { ApplicationScreen } from '../ApplicationScreen.js';
import styles from './Telemetry.styles.js';
import layout from '../../styles/global-styles.js';
import { reactive } from '../../lib/decorators.js';
import typography from '../../styles/m3/typography.module.js';
import surfaceStyles from '../../styles/m3/surface.module.js';
import '../../define/ui/ui-radio.js';
import '../../define/ui/ui-button.js';
/**
 * A screen presented to the user during the first-run to consent to
 * analytical data gathering.
 *
 */
export default class TelemetryScreen extends ApplicationScreen {
    async storeChanged() {
        // ....
    }
    static get styles() {
        return [styles, layout, typography, surfaceStyles];
    }
    constructor(init) {
        super(init);
        this.sharingLevel = 'noting';
        this.config = init.config;
    }
    async initialize() {
        if (!await this.isPlatformSupported()) {
            return;
        }
        await this.config.initialize();
        try {
            const config = await this.config.telemetry.read();
            this.sharingLevel = config.level;
        }
        catch (e) {
            // ...
        }
        this.initialized = true;
    }
    handleLevelSelection(e) {
        const button = e.target;
        if (!button.checked) {
            return;
        }
        this.sharingLevel = button.value;
    }
    handleConfirm() {
        this.saveLevel(this.sharingLevel);
    }
    async saveLevel(sharingLevel) {
        const config = {
            level: sharingLevel,
        };
        await this.config.telemetry.set(config);
    }
    pageTemplate() {
        const { initialized } = this;
        if (!initialized) {
            return super.pageTemplate();
        }
        return html `
    <main class="config-init">
      <div class="form-container">
        <form class="form surface2">
          ${this.renderTitle()}
          ${this.renderIntro()}
          ${this.renderSharingLevel()}
          ${this.infoTemplate()}
        </form>
      </div>
      ${this.actionsTemplate()}
    </main>
    `;
    }
    renderTitle() {
        return html `<h1 class="headline-large">Data sharing</h1>`;
    }
    renderIntro() {
        return html `
    <div class="body-large">
      We value your privacy and by default the application does not share any data. 
      We kindly ask you to allow sending analytics data so we can measure the use of the application.
    </div>
    `;
    }
    renderSharingLevel() {
        const { sharingLevel } = this;
        return html `
    <div class="sharing-level">
      <div>
        <ui-radio id="nothing" name="level" value="nothing" ?checked="${sharingLevel === 'noting'}" aria-labelledby="nothing-label" @change="${this.handleLevelSelection}"></ui-radio>
        <label for="nothing" id="nothing-label" title="No analytics data will be send to the analytics server." class="label-large">No analytics</label>
      </div>

      <div>
        <ui-radio id="crash" name="level" value="crash" ?checked="${sharingLevel === 'crash'}" aria-labelledby="crash-label" @change="${this.handleLevelSelection}"></ui-radio>
        <label for="crash" id="crash-label" title="Only application crashes and some critical errors are reported." class="label-large">Crash reports and errors</label>
      </div>

      <div>
        <ui-radio id="all" name="level" value="all" ?checked="${sharingLevel === 'all'}" aria-labelledby="all-label" @change="${this.handleLevelSelection}"></ui-radio>
        <label for="all" id="all-label" title="Crashers, errors, and usage is reported." class="label-large">Application usage</label>
      </div>
    </div>
    `;
    }
    actionsTemplate() {
        return html `
    <div class="actions">
      <ui-button 
        type="filled" 
        ?disabled="${!this.sharingLevel}" 
        @click="${this.handleConfirm}"
      >Confirm</ui-button>
    </div>
    `;
    }
    infoTemplate() {
        return html `
    <p class="body-medium">Mind that application usage helps us understand how the application is used and make product decisions. Data sharing does not include personal information and it is not used to track you over the internet.</p>
    <p class="body-medium">You can read our privacy policy <a href="#">here</a>.</p>
    `;
    }
}
__decorate([
    reactive()
], TelemetryScreen.prototype, "sharingLevel", void 0);
//# sourceMappingURL=Telemetry.screen.js.map