import React from 'react';
import logo from '@/assets/logo.svg';
import { action, observable, makeObservable } from 'mobx';
import { Storage } from '@/utils';
import config from '@/config';

const PRIMARY_COLOR_LOCAL_KEY = `${config.get('/app/code')}-primary-color`;
const NAV_THEME_LOCAL_KEY = `${config.get('/app/code')}-nav-theme`;
const LAYOUT_LOCAL_KEY = `${config.get('/app/code')}-layout`;
const LAYOUT_MENU_SPLIT_KEY = `${config.get('/app/code')}-menu-split`;

const colorThemeMap = {
  '#001529': 'Default',
  '#BA000D': 'FlagRed',
  '#21419B': 'SpaceBlue',
  '#1890FF': 'DaybreakBlue',
  '#F5222D': 'DustRed',
  '#FA541C': 'Volcano',
  '#FAAD14': 'SunsetOrange',
  '#13C2C2': 'Cyan',
  '#52C41A': 'PolarGreen',
  '#2F54EB': 'GeekBlue',
  '#722ED1': 'GoldenPurple',
}

export class Store {
  constructor() {
    makeObservable(this);
  }

  @observable theme: string = 'default'; //主题
  @observable navTheme: string = Storage.local.get(NAV_THEME_LOCAL_KEY) || 'SpaceBlue'; //Nav 主题
  @observable primaryColor: string =
    Storage.local.get(PRIMARY_COLOR_LOCAL_KEY) || '#21419B'; //主题颜色  拂晓蓝
  @observable layout: 'top' | 'mix' | 'side' | undefined =
    Storage.local.get(LAYOUT_LOCAL_KEY) || 'top'; //布局类型   top ｜ mix ｜ side  @observable contentWidth: string = 'Fluid';
  @observable fixedHeader: boolean = true; //固定头部
  @observable fixSiderbar: boolean = true; //移动侧边
  @observable colorWeak: boolean = false; //色弱模式
  @observable splitMenus: boolean = true; //菜单分割
  @observable logo: React.Component | string = logo; //Logo

  @action setTheme = (theme: string) => {
    this.theme = theme;
  };

  @action setNavTheme = (navTheme: string) => {
    this.navTheme = navTheme;
  };

  @action setPrimaryColor = (primaryColor: string) => {
    this.primaryColor = primaryColor === '#001529' ? '#1890FF' : primaryColor;
    this.navTheme = colorThemeMap[primaryColor];
    Storage.local.set(NAV_THEME_LOCAL_KEY, this.navTheme);
    Storage.local.set(PRIMARY_COLOR_LOCAL_KEY, this.primaryColor);
  };

  @action setLayout = (layout: 'top' | 'mix' | 'side' | undefined) => {
    this.layout = layout;
    Storage.local.set(LAYOUT_LOCAL_KEY, layout);
  };

  @action setFixedHead = (fixedHeader: boolean) => {
    this.fixedHeader = fixedHeader;
  };

  @action setFixSiderbar = (fixSiderbar: boolean) => {
    this.fixSiderbar = fixSiderbar;
  };

  @action setColorWeak = (colorWeak: boolean) => {
    this.colorWeak = colorWeak;
  };

  @action setSplitMenus = (splitMenus: boolean) => {
    Storage.local.set(LAYOUT_MENU_SPLIT_KEY, splitMenus);
    this.splitMenus = splitMenus;
  };

  @action setLogo = (logo: React.Component | string) => {
    this.logo = logo;
  };
}

export const baseLayoutStore = new Store();
