import {EventEmitter, Injectable} from '@angular/core'
import config from "@common/config";
import LocalStorageService from "../localStorage";

declare const window: any;
declare const document: any;

@Injectable()
export default class SettingService {

    /*
    * siteMenuBar 是否折叠
    * @value fold 折叠
    * @value unfold 不折叠
    * @default unfold
    * */
    siteMenuBar: string = 'unfold';
    toggleMenuBarEvent: EventEmitter<any> = new EventEmitter();

    /*
   * 当前及屏幕分辨率类型
   * @value lg 屏幕宽度大于1200
   * @value md 屏幕宽度大于992 小于1200
   * @value sm 屏幕宽度大于768 小于992
   * @value xs 屏幕宽度小于768
   * @default lg
   * */
    deviceWidthType: string = 'lg';
    deviceWidthTypeEvent: EventEmitter<any> = new EventEmitter();

    /*
   * 当分辨率类型为xs时是显示一级导航
   * @default false
   * */
    siteNavBarCollapseShow: boolean = false;
    siteNavBarCollapseShowEvent: EventEmitter<any> = new EventEmitter();

    /*
   * 主导航背景颜色
   * @value bg-blue-600
   * @value bg-brown-600
   * @value bg-cyan-600
   * @value bg-green-600
   * @value bg-grey-600
   * @value bg-indigo-600
   * @value bg-orange-600
   * @value bg-pink-600
   * @value bg-purple-600
   * @value bg-red-600
   * @value bg-teal-600
   * @value bg-yellow-600
   * @value bg-yellow-600
   * @default bg_blue_600
   * */
    siteNavBarBgColor: string = config.siteNavBarColor;
    siteNavBarBgColorEvent: EventEmitter<any> = new EventEmitter();

    /*
    * 主要航是否通栏显示背景
    * @default true
    * */
    siteNavBarColumnDisplayBgColor: boolean = config.siteNavBarColumnDisplayBgColor;
    siteNavBarColumnDisplayBgColorEvent: EventEmitter<any> = new EventEmitter();

    /*
    * siteMenuBar 主题
    * @value dark
    * @value light
    * @default dark
    * */
    siteMenuBarTheme: string = config.siteMenuBarTheme;
    siteMenuBarThemeEvent: EventEmitter<any> = new EventEmitter();

    /*
    * 系统主题
    * */
    theme: string = config.theme;
    themeEvent: EventEmitter<any> = new EventEmitter();

    /*
    * siteContabs是否显示
    * */
    siteContabsDisplay: boolean = config.siteContabsDisplay;
    siteContabsDisplayEvent: EventEmitter<any> = new EventEmitter();


    /*
    * resize附属事件们
    * */
    handlers: any = [];


    constructor(private localStorageService: LocalStorageService) {
        window.addEventListener('resize', this.resizeHandler.bind(this));
        this.resizeHandler();

        this.siteNavBarBgColor = this.localStorageService.get('siteNavBarBgColor') || this.siteNavBarBgColor;
        this.siteMenuBarTheme = this.localStorageService.get('siteMenuBarTheme') || this.siteMenuBarTheme;
        this.siteMenuBar = this.localStorageService.get('siteMenuBar') || this.siteMenuBar;

        if (this.localStorageService.get('siteNavBarColumnDisplayBgColor')) {
            this.siteNavBarColumnDisplayBgColor = Boolean(Number(this.localStorageService.get('siteNavBarColumnDisplayBgColor')));
        }
        if (this.localStorageService.get('siteContabsDisplay')) {
            this.siteContabsDisplay = this.localStorageService.get('siteContabsDisplay') == "true";
        }
    }

    /*
    * 设置siteContabs是否显示
    * */
    setSiteContabsDisplay(bool) {
        this.siteContabsDisplay = bool;
        this.siteContabsDisplayEvent.emit(bool);
        this.localStorageService.set('siteContabsDisplay', bool);
    }

    /*
    * 设置站点导航条颜色
    * */
    setSiteMenuBarTheme(value) {
        this.siteMenuBarTheme = value;
        this.siteMenuBarThemeEvent.emit(value);
        this.localStorageService.set('siteMenuBarTheme', value);
    }

    /*
    * 设置站点导航条颜色
    * */
    setSiteNavBarBgColor(value) {
        this.siteNavBarBgColor = value;
        this.siteNavBarBgColorEvent.emit(value);
        this.localStorageService.set('siteNavBarBgColor', value);
    }

    /*
    * 监听窗口resize事件
    * */
    resizeHandler() {
        this.setDeviceWidthType(document.documentElement.clientWidth);
        this.handlers.map(handler => handler());
    }

    /*
    * 添加窗口resize附属事件
    * */
    pushHandler(handler: Function) {
        this.handlers.push(handler)
    }

    /*
    * 设置当前分辨率类型类型
    * @param clientWidth 屏幕宽度
    * */
    setDeviceWidthType(clientWidth) {
        if (clientWidth >= 992 && clientWidth < 1200) {
            this.deviceWidthType = 'md';
            this.unfoldMenuBar();
        } else if (clientWidth >= 762 && clientWidth < 992) {
            this.deviceWidthType = 'sm';
            this.foldMenuBar();
        } else if (clientWidth < 762) {
            this.deviceWidthType = 'xs';
            this.foldMenuBar();
            this.foldSiteNavBarCollapse();
        } else {
            this.deviceWidthType = 'lg';
            this.unfoldMenuBar();
        }
        this.deviceWidthTypeEvent.emit(this.deviceWidthType);
    }

    /*
    * 切换siteNavBar折叠
    * */
    toggleSiteNavBarCollapse() {
        this.siteNavBarCollapseShow = !this.siteNavBarCollapseShow;
        this.siteNavBarCollapseShowEvent.emit(this.siteNavBarCollapseShow);
    }

    /*
    * 设置主导航通栏显示背景颜色
    * @param bool:boolean
    * */
    setSiteNavBarColumnDisplayBgColor(bool) {
        this.siteNavBarColumnDisplayBgColor = bool;
        this.siteNavBarColumnDisplayBgColorEvent.emit(this.siteNavBarColumnDisplayBgColor);
        this.localStorageService.set('siteNavBarColumnDisplayBgColor', Number(this.siteNavBarColumnDisplayBgColor));
    }

    /*
    * 折叠siteNavBar
    * */
    foldSiteNavBarCollapse() {
        this.siteNavBarCollapseShow = false;
        this.siteNavBarCollapseShowEvent.emit(this.siteNavBarCollapseShow);
    }

    /*
    * 切换siteMenuBar折叠
    * */
    toggleMenuBar() {
        if (this.siteMenuBar == 'fold') {
            this.unfoldMenuBar()
        } else {
            this.foldMenuBar()
        }
    }

    /*
    * 折叠siteMenuBar
    * */
    foldMenuBar() {
        this.siteMenuBar = 'fold';
        this.toggleMenuBarEvent.emit(this.siteMenuBar);
    }

    /*
    * 不折叠siteMenuBar
    * */
    unfoldMenuBar() {
        this.siteMenuBar = 'unfold';
        this.toggleMenuBarEvent.emit(this.siteMenuBar);
    }

    /*
    * 设置siteMenuBar是否折叠
    * */
    setMenuBarFoldOrNot(value) {
        this.siteMenuBar = value;
        this.toggleMenuBarEvent.emit(value);
        this.localStorageService.set('siteMenuBar', value);
    }

    /*
   * 是否需要折叠siteMenuBar
   * */
    shouldFoldMenuBar() {
        if (this.siteMenuBar == 'unfold' && this.deviceWidthType == 'xs') {
            this.foldMenuBar();
        }
    }
}