import * as React from "react";
import {
  ReportData,
  GroupKey,
} from "../../features/report";

export type DashboardFlow = "outflows" | "inflows";
export type DashboardPeriodType = "rolling" | "calendar";
export type DashboardSelectedPeriodId = string | null;

export interface DashboardState {
  flow: DashboardFlow;
  periodType: DashboardPeriodType;
  selectedPeriodId: DashboardSelectedPeriodId;
  selectedGroupKey: GroupKey | null;
  comparison: boolean;
}

export interface DashboardStateSetters {
  setSelectedPeriodId: (id: DashboardSelectedPeriodId) => void;
  setSelectedGroupKey: (groupKey: GroupKey | null) => void;
  toggleFlow: () => void;
  togglePeriodType: () => void;
  toggleComparison: () => void;
}

export interface DashboardSection {
  id: string;
  title: string;
  component: React.ComponentType<any>;
  summary?: string;
  settings?: Record<string, any>;
}

export interface DashboardConfig {
  sections: DashboardSection[];
}

export interface DashboardViewProps {
  config: DashboardConfig;
  data: ReportData;
  state: DashboardState;
  stateSetters: DashboardStateSetters;
  isFetching: boolean;
}

export interface ColorScheme {
  primary: string;
  surface: string;
  text: string;
}

export interface ComponentProps extends DashboardSection {
  reportData: ReportData;

  state: DashboardState;
  stateSetters: DashboardStateSetters;
  isFetching: boolean;

  colorScheme: ColorScheme;
}