import createContainerBundle from "./_create-container-bundle";
import { createSelector } from "redux-bundler";

export default createContainerBundle({
  name: "primaryPanel",
  additionalState: {
    width: 300,
    showClose: false,
    showFavoritesBtn: false,
    favoritesDB: null,
    showUserDefaultLayersBtn: false,
    userDefaultLayersDB: null,
  },
  additionalActions: [
    "PRIMARY_PANEL_RESIZED",
    "PRIMARY_PANEL_SHOW_CLOSE",
    "PRIMARY_PANEL_SET_WIDTH",
    "PRIMARY_PANEL_SHOW_FAVORITES_BTN",
    "PRIMARY_PANEL_SHOW_USER_DEFAULT_LAYERS_BTN",
  ],
  addons: {
    doPrimaryPanelResize:
      ({ width }) =>
      ({ dispatch }) => {
        dispatch({ type: "PRIMARY_PANEL_RESIZED", payload: { width: width } });
      },
    doPrimaryPanelSetWidth:
      (width) =>
      ({ dispatch }) => {
        dispatch({
          type: "PRIMARY_PANEL_SET_WIDTH",
          payload: { width: width },
        });
      },
    doShowPrimaryPanelCloseBtn:
      () =>
      ({ dispatch }) => {
        dispatch({
          type: "PRIMARY_PANEL_SHOW_CLOSE",
          payload: { showClose: true },
        });
      },
    doShowFavoritesBtn:
      (favoritesDB) =>
      ({ dispatch }) => {
        dispatch({
          type: "PRIMARY_PANEL_SHOW_FAVORITES_BTN",
          payload: { showFavoritesBtn: true, favoritesDB: favoritesDB },
        });
      },
    doShowUserDefaultLayersBtn:
      (userDefaultLayersDB) =>
      ({ dispatch }) => {
        dispatch({
          type: "PRIMARY_PANEL_SHOW_USER_DEFAULT_LAYERS_BTN",
          payload: { showUserDefaultLayersBtn: true, userDefaultLayersDB: userDefaultLayersDB },
        });
      },
    selectPrimaryPanelWidth: (state) => {
      return state.primaryPanel.width;
    },
    selectPrimaryPanelShowClose: (state) => {
      return state.primaryPanel.showClose;
    },
    selectPrimaryPanelShowFavoritesBtn: (state) => {
      return state.primaryPanel.showFavoritesBtn;
    },
    selectPrimaryPanelFavoritesDB: (state) => {
      return state.primaryPanel.favoritesDB;
    },
    selectPrimaryPanelShowUserDefaultLayersBtn: (state) => {
      return state.primaryPanel.showUserDefaultLayersBtn;
    },
    selectPrimaryPanelUserDefaultLayersDB: (state) => {
      return state.primaryPanel.userDefaultLayersDB;
    },
    selectPrimaryPanelTop: createSelector(
      "selectComponentsBasicToolbarCount",
      (cnt) => {
        if (cnt > 0) return 42;
        return 0;
      }
    ),
  },
});
