import React, { createContext, useContext, useMemo, useState } from "react";

export type ConnectedAccountKey = "a" | "b" | "c";
export type AccountFilterValue = "all" | ConnectedAccountKey;

export type AccountFilterView = "viewing";

export type AccountFilterState = {
  view: AccountFilterView;
  account: AccountFilterValue;
};

type AccountFilterContextValue = {
  state: AccountFilterState;
  setState: React.Dispatch<React.SetStateAction<AccountFilterState>>;
};

const AccountFilterContext = createContext<AccountFilterContextValue | null>(null);

const DEFAULT_STATE: AccountFilterState = {
  view: "viewing",
  account: "all",
};

export function AccountFilterProvider({
  children,
  initial,
}: {
  children: React.ReactNode;
  initial?: AccountFilterState;
}) {
  const [state, setState] = useState<AccountFilterState>(initial ?? DEFAULT_STATE);

  const value = useMemo<AccountFilterContextValue>(() => ({ state, setState }), [state]);
  return <AccountFilterContext.Provider value={value}>{children}</AccountFilterContext.Provider>;
}

export function useAccountFilter() {
  const ctx = useContext(AccountFilterContext);
  if (!ctx) throw new Error("useAccountFilter must be used within AccountFilterProvider");
  return ctx;
}

export function formatAccountFilterLabel(account: AccountFilterValue) {
  switch (account) {
    case "all":
      return "All Accounts";
    case "a":
      return "Connected Account A";
    case "b":
      return "Connected Account B";
    case "c":
      return "Connected Account C";
    default:
      return "All Accounts";
  }
}