import React from 'react';
import { usePollStats } from '../polling/usePollStats';

type EventStatsContextValue = ReturnType<typeof usePollStats> & {
  slug: string;
};

const EventStatsContext = React.createContext<EventStatsContextValue | undefined>(undefined);

export function EventStatsProvider({ slug, children }: { slug: string; children: React.ReactNode }) {
  const stats = usePollStats(slug);
  const value = React.useMemo<EventStatsContextValue>(
    () => ({ slug, ...stats }),
    [slug, stats.onlineGuests, stats.tasksSolved, stats.latestPhotoAt, stats.loading]
  );
  return <EventStatsContext.Provider value={value}>{children}</EventStatsContext.Provider>;
}

export function useEventStats() {
  const ctx = React.useContext(EventStatsContext);
  if (!ctx) {
    throw new Error('useEventStats must be used within an EventStatsProvider');
  }
  return ctx;
}

export function useOptionalEventStats() {
  return React.useContext(EventStatsContext);
}