import { WidgetKind } from '@livelike/javascript';
import { createStore } from './store';

export type TimelineWidgetState = {
  widgetId: string;
  widgetKind: WidgetKind;
};

export type TimelineWidgetsState = {
  widgets: TimelineWidgetState[];
};

export type TimelineWidgetStoreValue = Record<string, TimelineWidgetsState>;

const initialTimelineWidgetStoreValue: TimelineWidgetStoreValue = {};

export const timelineWidgetStore = createStore(initialTimelineWidgetStoreValue);

export type BaseTimelineWidgetsActionArgs = {
  programId: string;
};

export type updateTimelineWidgetStateActionArgs =
  BaseTimelineWidgetsActionArgs & {
    widgetTimelineState: TimelineWidgetsState;
  };

export type UpdateTimelineWidgetsActionArgs = BaseTimelineWidgetsActionArgs & {
  widgets: TimelineWidgetState[];
  prepend?: boolean;
};

export const timelineWidgetStoreActions = {
  updateTimelineWidgetStateAction({
    programId,
    widgetTimelineState,
  }: updateTimelineWidgetStateActionArgs) {
    const prevTimelineWidgetsState = timelineWidgetStore.get()[programId];
    timelineWidgetStore.set({
      ...timelineWidgetStore.get(),
      [programId]: {
        ...prevTimelineWidgetsState,
        ...widgetTimelineState,
      },
    });
  },
  updateTimelineWidgetsAction({
    programId,
    widgets,
    prepend,
  }: UpdateTimelineWidgetsActionArgs) {
    const prevTimelineWidgetsState = timelineWidgetStore.get()[programId];
    let updatedWidgets = prevTimelineWidgetsState?.widgets ?? [];
    const widgetIdSet = new Set();
    for (const { widgetId } of updatedWidgets) {
      widgetIdSet.add(widgetId);
    }
    const filteredWidgets = widgets.filter(
      ({ widgetId }) => !widgetIdSet.has(widgetId)
    );
    if (prepend) {
      updatedWidgets = [...filteredWidgets, ...updatedWidgets];
    } else {
      updatedWidgets = [...updatedWidgets, ...filteredWidgets];
    }
    timelineWidgetStore.set({
      ...timelineWidgetStore.get(),
      [programId]: {
        ...prevTimelineWidgetsState,
        widgets: updatedWidgets,
      },
    });
  },
};