import {
Component,
Input,
OnDestroy,
} from '@angular/core';
import {
LocaleService, SettingsService, LocaleSubject,
MediaQueryService, MediaQuerySettingType, MediaQuerySetting
} from "../../../web";
import { Subscription } from 'rxjs'
// requires to be in a mat-menu
@Component({
selector: 'cory-mat-translation-button',
template: `
<mat-menu x-position="before" #menuTranslate="matMenu">
<cory-mat-translation-menu></cory-mat-translation-menu>
</mat-menu>
<button [color]="color" mat-button [matMenuTriggerFor]="menuTranslate" [matTooltip]="tooltip" [matTooltipPosition]="matTooltipPosition">
<mat-icon>language</mat-icon>
<span class="cory-mat-hide-xsmall">
{{ i18n.material.title.language }}
</span>
</button>
`,
})
export class TranslationButton implements OnDestroy {
subscriptions$: Array<Subscription> = []
@Input('color')
color: string = 'default';
@Input('cory-tooltip-position')
matTooltipPosition: string = 'left';
i18n: any;
settings: any;
tooltip: string;
currentWidthAlias: string;
constructor(
protected locale: LocaleService,
protected settingsAll: SettingsService,
private mediaQuery: MediaQueryService
) {
this.settings = settingsAll.data.material;
this.subscriptions$.push(
this.locale.subscribe((data: LocaleSubject) => {
this.i18n = data.locale.data;
this.setTooltip();
})
)
this.subscriptions$.push(
this.mediaQuery.subscribe((settings: MediaQuerySetting[]) => {
settings.forEach((setting) => this.setTooltip(setting.name))
})
)
}
private setTooltip(alias?: string) {
if (alias !== undefined) {
this.currentWidthAlias = alias;
}
switch (this.currentWidthAlias) {
case 'small':
this.tooltip = this.locale.data.material.title.language;
break;
case 'large':
this.tooltip = undefined;
break;
}
}
ngOnDestroy(): void {
this.subscriptions$.forEach(subs$ => subs$.unsubscribe())
}
}
