import * as React from "react";
import { Box } from "ink";

type QueuedMessageContextValue = {
  isQueued: boolean;
  isFirst: boolean;
  paddingWidth: number;
};

const QueuedMessageContext = React.createContext<
  QueuedMessageContextValue | undefined
>(undefined);

export function useQueuedMessage():
  | QueuedMessageContextValue
  | undefined {
  return React.useContext(QueuedMessageContext);
}

const PADDING_X = 2;

type Props = {
  isFirst: boolean;
  useBriefLayout?: boolean;
  children: React.ReactNode;
};

export function QueuedMessageProvider({
  isFirst,
  useBriefLayout,
  children,
}: Props): React.ReactNode {
  const padding = useBriefLayout ? 0 : PADDING_X;
  const value = React.useMemo(
    () => ({
      isQueued: true,
      isFirst,
      paddingWidth: padding * 2,
    }),
    [isFirst, padding],
  );

  return (
    <QueuedMessageContext.Provider value={value}>
      <Box paddingX={padding}>{children}</Box>
    </QueuedMessageContext.Provider>
  );
}
