import {action, observable, extendObservable} from 'mobx';
import { notification, } from 'antd';

export const DIALOG = {
  ORDER: {
    MAKE_PAYMENT: "dialog_order_make_payment",
    CANCEL_PAYMENT: "dialog_order_cancel_payment",
    INPUT_SHIPPING_CODE: 'dialog_order_input_shipping_code',
    GOJEK_DELIVERY : 'dialog_order_gojek_delivery',
    PREORDER_ADD_NOTES : 'dialog_preorder_add_notes'
  },
  FEATURED_ITEM : {
    CREATE : 'dialog_featured_item_create'
  },
  CUSTOM_MENU : {
    CREATE : 'dialog_featured_custom_menu'
  },
  STORES: {
    CREATE: "dialog_stores_create",
    UPDATE: "dialog_stores_update",
  },
  ADDRESS :{
    CREATE : "dialog_address_create"
  },
  SETTING : {
    CATEGORIES : 'dialog_categories',
    TAGS : 'dialog_tags',
  },
  EMPLOYEE: {
    CREATE: "dialog_employee_create",
    UPDATE: "dialog_employee_update",
  },
  WALLET: {
    DEPOSIT: "dialog_wallet_deposit",
    WITHDRAW: "dialog_wallet_withdraw",
  },
  UI: {
    LOADING: "dialog_loading",
    ALERT: "dialog_alert"
  },
  ENTITY: {
    CREATE: 'entity_create'
  },
  STORE_LIST: {
    CREATE: 'store_list_create'
  },
  FEATURED_STORES: {
    CREATE: 'featured_stores_create'
  },
  FEATURED_CATEGORIES: {
    CREATE: 'featured_categories_create'
  },
};

export default class GlobalUI {
  @observable showSideMenu = false;
  @observable backgroundColor = "#fff";
  @observable snackbarVisibility = false;
  @observable loadingVisibility = false;
  @observable snackbarMessage = "";
  @observable settingTabSelected = "General";
  @observable itemsTabSelected = "all";
  @observable globalAlert = '';
  @observable dataTabSelected = "";
  @observable layoutTabSelected = "";
  @observable contentTabSelected = "";

  constructor() {

    let dialogValue = {};

    Object.keys(DIALOG).map(k => {
      Object.keys(DIALOG[k]).map(key => dialogValue[DIALOG[k][key]] = false);
    });

    extendObservable(this, dialogValue);
  }

  @action
  showNotification(title, msg){
    notification.config({
      placement: 'topRight',
      duration: 30,
      top:80,
      className:'marketplace-notification'
    });

    notification.error({
      description: msg,
      message: title,
      style: {zIndex: 999999},
      className:'marketplace-notification'
    });
  }

  @action
  showDialog(name) {
    this[name] = true;
  }

  @action
  hideDialog(name) {
    this[name] = false;
  }

  @action
  changeBackgroundColor(color) {
    this.backgroundColor = (!color) ? this.backgroundColor : color;
  }

  @action
  openSnackbar(message){
    this.snackbarMessage = message;
    this.snackbarVisibility = true;
    setTimeout(() => {
      this.snackbarVisibility = false;
      this.snackbarMessage = "";
    }, 3000);
  }

  @action
  openLoading(){
    this.loadingVisibility = true;
  }

  @action
  closeLoading(){
    this.loadingVisibility = false;
  }

  @action
  showDialogLoading() {
    this[DIALOG.UI.LOADING] = true;
  }

  @action
  hideDialogLoading() {
    this[DIALOG.UI.LOADING] = false;
  }

  @action
  showAlert(message) {
    this.globalAlert = message;
    this[DIALOG.UI.ALERT] = true;
  }

  @action
  hideAlert() {
    this.globalAlert = '';
    this[DIALOG.UI.ALERT] = false;
  }

  @observable successAlertCB = ()=>{
      this.closeAlert();
  };

  @action
  openAlert({title=false,subtitle=false,cb=false,type='error'}){
      if(typeof cb === 'function'){
          this.successAlertCB = cb;
      }
      this.alertDialog= {
          title : title,
          open : true,
          subtitle : subtitle,
          type : type
      }
  };

  @action
  closeAlert(){
      this.alertDialog.title = false;
      this.alertDialog.open = false;
      this.alertDialog.subtitle = false;
      this.successAlertCB = ()=>this.closeAlert();
  }
}