{"size": 1270, "ext": "js", "max_stars_repo_path": "src/modules/uiTheme/components/toggle/ThemeToggle.js", "max_stars_repo_name": "taulinger/bav4-nomigration", "max_stars_repo_stars_event_min_datetime": "2020-12-20T12:34:43.000Z", "max_stars_repo_stars_event_max_datetime": "2022-03-04T08:24:42.000Z", "max_issues_repo_path": "src/modules/uiTheme/components/toggle/ThemeToggle.js", "max_issues_repo_name": "ldbv-by/bav4-nomigration", "max_issues_repo_issues_event_min_datetime": "2020-12-22T09:58:22.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-31T13:51:01.000Z", "max_forks_repo_path": "src/modules/uiTheme/components/toggle/ThemeToggle.js", "max_forks_repo_name": "taulinger/bav4-nomigration", "max_forks_repo_forks_event_min_datetime": "2020-11-16T14:30:12.000Z", "max_forks_repo_forks_event_max_datetime": "2020-11-16T14:30:12.000Z"}
{"max_stars_count": 10, "max_issues_count": 205, "max_forks_count": 1, "avg_line_length": 25.4, "max_line_length": 146, "alphanum_fraction": 0.6700787402}
import { html } from 'lit-html';
import { $injector } from '../../../../injection';
import css from './themeToggle.css';
import { toggleSchema } from '../../../../store/media/media.action';
import { MvuElement } from '../../../MvuElement';

const Update_Schema = 'update_schema';


/**
 * Toggles the UI between a light and a dark theme
 * @class
 * @author taulinger
 */
export class ThemeToggle extends MvuElement {

	constructor() {
		super({ darkSchema: false });

		const { TranslationService } = $injector.inject('TranslationService');
		this._translationService = TranslationService;

		this.observe(state => state.media.darkSchema, darkSchema => this.signal(Update_Schema, darkSchema));
	}

	update(type, data, model) {
		switch (type) {
			case Update_Schema:
				return { ...model, darkSchema: data };
		}
	}


	createView(model) {

		const { darkSchema } = model;
		const titleSuffix = darkSchema ? 'dark' : 'light';
		const title = this._translationService.translate(`uiTheme_toggle_tooltip_${titleSuffix}`);

		return html`
		<style>${css}</style>
		<ba-toggle .title='${title}' .checked=${darkSchema} @toggle=${toggleSchema}><div class='container'><i class='icon adjust'></i></div></ba-toggle>
		`;
	}

	static get tag() {
		return 'ba-theme-toggle';
	}
}
