import { useEffect, useRef } from 'react';
import { useStore } from '../services/store';
import { Direction, IMedia, ISettings } from '../types';

interface PostSnapshot {
  post: IMedia | null;
  stlMode: boolean;
}

const determineDirection = (
  previousIndex: number,
  nextIndex: number,
  totalPosts: number,
): Direction => {
  if (totalPosts <= 1) {
    return 'right';
  }

  const delta = nextIndex - previousIndex;

  if (Math.abs(delta) === totalPosts - 1) {
    return delta > 0 ? 'left' : 'right';
  }

  return delta > 0 ? 'right' : 'left';
};

const isShopTheLookActive = (
  shopThisLookDisplay: ISettings['shop_this_look_display'] | undefined,
  post: IMedia | null,
): boolean => {
  if (!shopThisLookDisplay || !post || shopThisLookDisplay === 'none') {
    return false;
  }

  if (shopThisLookDisplay === 'modal') {
    return Boolean(post.products && post.products.length > 0);
  }

  return true;
};

export const usePostViewerEvents = (): void => {
  const store = useStore();
  const previousRef = useRef<PostSnapshot>({ post: null, stlMode: false });

  const currentPost = store.post ?? null;
  const widgetId = store.data?.id;
  const shopThisLookDisplay = store.data?.settings?.shop_this_look_display;
  const medias = store.data?.content?.medias ?? [];

  useEffect(() => {
    if (!widgetId) {
      previousRef.current = { post: currentPost, stlMode: false };
      return;
    }

    const previous = previousRef.current;
    const isStlMode = isShopTheLookActive(shopThisLookDisplay, currentPost);

    if (!previous.post && currentPost) {
      store.triggerEvent(isStlMode ? 'stlOpened' : 'postOpened', { post: currentPost }, widgetId);
    } else if (previous.post && currentPost && previous.post.id !== currentPost.id) {
      const direction = determineDirection(previous.post.postIndex, currentPost.postIndex, medias.length);
      const eventName = previous.stlMode || isStlMode ? 'stlNavigation' : 'postNavigation';

      store.triggerEvent(
        eventName,
        {
          direction,
          post: currentPost,
        },
        widgetId,
      );
    } else if (previous.post && !currentPost) {
      if (previous.stlMode) {
        store.triggerEvent('stlClosed', { post: previous.post }, widgetId);
      } else if (shopThisLookDisplay === 'none') {
        store.triggerEvent('postClosed', { post: previous.post }, widgetId);
      }
    }

    previousRef.current = { post: currentPost, stlMode: isStlMode };
  }, [currentPost, widgetId, shopThisLookDisplay, medias.length, store.triggerEvent]);
};

export default usePostViewerEvents;