import { Component } from '@angular/core';
import { ThemeType, ThemesService } from '@core/services/themes.service';
import { SettingsService } from '@core/services/settings.service';

@Component({
    selector: 'header-theme',
    template: `
    <strong>{{ 'theme-switch' | translate}}</strong>
    <div class="theme-icons">
        <label *ngFor="let item of themes" (click)="changeTheme(item.l)" [style.background]="item.bg">
            <i class="anticon anticon-check" *ngIf="item.l == settings.layout.theme"></i>
            <div class="areas">
                <span class="nav" [style.background]="item.nav"></span>
                <span class="con" [style.background]="item.con"></span>
            </div>
        </label>
    </div>
    `
})
export class HeaderThemeComponent {

    themes: { l: ThemeType, bg: string, nav: string, con: string }[] = [
        { l: 'A', bg: '#108ee9', nav: '#fff', con: '#f5f7fa' },
        { l: 'B', bg: '#00a2ae', nav: '#fff', con: '#f5f7fa' },
        { l: 'C', bg: '#00a854', nav: '#fff', con: '#f5f7fa' },
        { l: 'D', bg: '#f04134', nav: '#fff', con: '#f5f7fa' },
        { l: 'E', bg: '#373d41', nav: '#fff', con: '#f5f7fa' },
        { l: 'F', bg: '#108ee9', nav: '#404040', con: '#f5f7fa' },
        { l: 'G', bg: '#00a2ae', nav: '#404040', con: '#f5f7fa' },
        { l: 'H', bg: '#00a854', nav: '#404040', con: '#f5f7fa' },
        { l: 'I', bg: '#f04134', nav: '#404040', con: '#f5f7fa' },
        { l: 'J', bg: '#373d41', nav: '#404040', con: '#f5f7fa' }
    ];

    constructor(
        public settings: SettingsService,
        private themeServ: ThemesService
    ) {
    }

    changeTheme(theme: ThemeType) {
        this.themeServ.setTheme(theme);
        this.settings.setLayout('theme', theme);
    }
}