import { useCallback } from 'react';
import { useTimelineWidgets } from './useTimelineWidgets';
import { timelineWidgetStoreActions } from '../store';

export type useTimelineWidgetActionsArg = {
  programId: string;
};

export function useTimelineWidgetActions({
  programId,
}: useTimelineWidgetActionsArg) {
  const widgets = useTimelineWidgets({ programId });
  const onWidgetInteractiveTimeout = useCallback(
    (timedOutWidgetId: string) => {
      if (!widgets?.length) {
        return;
      }
      const updatedWidgets = widgets.filter(
        ({ widgetId }) => widgetId !== timedOutWidgetId
      );
      timelineWidgetStoreActions.updateTimelineWidgetStateAction({
        programId,
        widgetTimelineState: {
          widgets: updatedWidgets,
        },
      });
    },
    [widgets]
  );

  return {
    onWidgetInteractiveTimeout,
    updateTimelineWidgetStateAction:
      timelineWidgetStoreActions.updateTimelineWidgetStateAction,
    updateTimelineWidgetsAction:
      timelineWidgetStoreActions.updateTimelineWidgetsAction,
  };
}