import { useCallback } from 'react';
import { useAnalytics } from './useAnalytics';
import { useWidget } from './useWidget';
import {
  WidgetCreateInteractionActionArg,
  useWidgetInteractionActions,
} from './useWidgetInteractionActions';

export type UseWidgetSubmitActionArg = {
  widgetId: string;
};

export function useWidgetSubmitAction({ widgetId }: UseWidgetSubmitActionArg) {
  const widget = useWidget({ widgetId });
  const { trackEvent } = useAnalytics();
  const { createWidgetInteractionAction } = useWidgetInteractionActions({
    widgetId,
  });
  const onInteractionSubmit = useCallback(
    ({ interactionItem }: WidgetCreateInteractionActionArg) => {
      return createWidgetInteractionAction({ interactionItem }).then((res) => {
        trackEvent('Widget Submitted', {
          widget,
          interactionItem,
        });
        return res;
      });
    },
    [widgetId, createWidgetInteractionAction, trackEvent]
  );
  return { onInteractionSubmit };
}