import {
  model,
  Model,
  modelAction,
  ModelAutoTypeCheckingMode,
  setGlobalConfig,
  tProp,
  types,
} from 'mobx-keystone';

setGlobalConfig({
  modelAutoTypeChecking: ModelAutoTypeCheckingMode.AlwaysOn,
});

@model('keystone/Layout/Layout')
export default class Layout extends Model({
  headerHeight: tProp(types.number, 110),
  footerHeight: tProp(types.number, 50),
  showHeader: tProp(types.boolean, true),
  showFooter: tProp(types.boolean, true),
  headerColor: tProp(types.string, '#009FE2'),
  footerColor: tProp(types.string, '#000000'),
  primaryColor: tProp(types.string, '#009FE2'),
  secondaryColor: tProp(types.string, '#4CAF50'),
  paperBackgroundColor: tProp(types.string, '#1a1a1a'),
  componentBackgroundColor: tProp(types.string, '#1a1a1a'),
  customLogo: tProp(types.boolean, false),
  pathLogo: tProp(types.string, ''),
  maxHeightLogo: tProp(types.number, 250),
  marginLogo: tProp(types.number, 0),
  screenType: tProp(types.number, 0),
  iconSize: tProp(types.string, 'large'),
  iconSizeValue: tProp(types.number, 2),
  keypadSize: tProp(types.number, 70),
}) {
  onInit = () => {
    const isShowHeaderSet = this.showHeader;
    if (!isShowHeaderSet) {
      this.setShowHeader(true);
      setTimeout(() => {
        this.setShowHeader(false);
      }, 5000);
    }
  };

  @modelAction
  setKeypadSize(keypadSize: number) {
    this.keypadSize = keypadSize;
  }

  @modelAction
  setIconSizeValue(iconSize: number) {
    this.iconSizeValue = iconSize;
    if (iconSize === 2) {
      this.setIconSize('large');
    } else if (iconSize === 1) {
      this.setIconSize('medium');
    } else if (iconSize === 0) {
      this.setIconSize('small');
    } else {
      this.setIconSize('large');
    }
  }

  @modelAction
  setIconSize(iconSize: string) {
    this.iconSize = iconSize;
  }

  @modelAction
  setScreenType(screenType: number) {
    this.screenType = screenType;
  }

  @modelAction
  setCustomLogo(customLogo: boolean) {
    this.customLogo = customLogo;
  }

  @modelAction
  setMaxHeightLogo(maxHeightLogo: number) {
    this.maxHeightLogo = maxHeightLogo;
  }

  @modelAction
  setMarginLogo(marginLogo: number) {
    this.marginLogo = marginLogo;
  }

  @modelAction
  setPathLogo(pathLogo: string) {
    this.pathLogo = pathLogo;
  }

  @modelAction
  setHeaderHeight(headerHeight: number) {
    this.headerHeight = headerHeight;
  }

  @modelAction
  setFooterHeight(footerHeight: number) {
    this.footerHeight = footerHeight;
  }

  @modelAction
  setShowHeader(showHeader: boolean) {
    this.showHeader = showHeader;
  }

  @modelAction
  setShowFooter(showFooter: boolean) {
    this.showFooter = showFooter;
  }

  @modelAction
  setHeaderColor(headerColor: string) {
    this.headerColor = headerColor;
  }

  @modelAction
  setPrimaryColor(primaryColor: string) {
    this.primaryColor = primaryColor;
  }

  @modelAction
  setSecondaryColor(secondaryColor: string) {
    this.secondaryColor = secondaryColor;
  }

  @modelAction
  setPaperBackgroundColor(color: string) {
    this.paperBackgroundColor = color;
  }

  @modelAction
  setComponentBackgroundColor(color: string) {
    this.componentBackgroundColor = color;
  }

  @modelAction
  setFooterColor(footerColor: string) {
    this.footerColor = footerColor;
  }
}
