export const WORKBENCH_LAYOUT = {
  headerHeight: 56,
  desktopMinWidth: 1024,
  persistentConditionMinWidth: 1280,
  wideMinWidth: 1536,
  collapsedAgentWidth: 136,
  mapEdgeGap: 24,
  desktop: {
    agentWidth: 460,
    conditionWidth: 432,
    toolbarWidth: 48,
    tickerWidth: 420
  },
  wide: {
    agentWidth: 500,
    conditionWidth: 432,
    toolbarWidth: 48,
    tickerWidth: 460
  }
} as const;

export type WorkbenchPanelState = {
  agentOpen: boolean;
  conditionOpen: boolean;
};

export type WorkbenchBasemapTone = "light" | "satellite" | "none";

export type WorkbenchViewportLayout = {
  agentWidth: number;
  conditionWidth: number;
  toolbarWidth: number;
  tickerWidth: number;
};

export function getWorkbenchViewportLayout(viewportWidth: number): WorkbenchViewportLayout {
  return viewportWidth >= WORKBENCH_LAYOUT.wideMinWidth
    ? WORKBENCH_LAYOUT.wide
    : WORKBENCH_LAYOUT.desktop;
}

export function getWorkbenchBasemapTone(activeBaseLayerId: string): WorkbenchBasemapTone {
  if (activeBaseLayerId === "mapbox-light") {
    return "light";
  }

  if (activeBaseLayerId === "mapbox-satellite") {
    return "satellite";
  }

  return "none";
}

export function getWorkbenchCameraPadding(viewportWidth: number, panels: WorkbenchPanelState) {
  if (viewportWidth < WORKBENCH_LAYOUT.desktopMinWidth) {
    return { top: 72, right: 24, bottom: 72, left: 24 };
  }

  const layout = getWorkbenchViewportLayout(viewportWidth);
  const agentWidth = panels.agentOpen ? layout.agentWidth : WORKBENCH_LAYOUT.collapsedAgentWidth;
  const conditionWidth = panels.conditionOpen ? layout.conditionWidth : 0;

  return {
    top: WORKBENCH_LAYOUT.headerHeight + 16,
    right: WORKBENCH_LAYOUT.mapEdgeGap + layout.toolbarWidth + conditionWidth,
    bottom: 32,
    left: WORKBENCH_LAYOUT.mapEdgeGap + agentWidth
  };
}

export function getWorkbenchLayoutCssVariables() {
  return {
    "--workbench-agent-width": `${WORKBENCH_LAYOUT.desktop.agentWidth}px`,
    "--workbench-agent-width-wide": `${WORKBENCH_LAYOUT.wide.agentWidth}px`,
    "--workbench-condition-width": `${WORKBENCH_LAYOUT.desktop.conditionWidth}px`,
    "--workbench-condition-width-wide": `${WORKBENCH_LAYOUT.wide.conditionWidth}px`,
    "--workbench-toolbar-width": `${WORKBENCH_LAYOUT.desktop.toolbarWidth}px`,
    "--workbench-ticker-width": `${WORKBENCH_LAYOUT.desktop.tickerWidth}px`,
    "--workbench-ticker-width-wide": `${WORKBENCH_LAYOUT.wide.tickerWidth}px`
  } as const;
}