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

// Events are now fired at their action sites rather than derived from state changes.
// See: Thumbnail.handleOpen, PostViewer.handleClose, ShopThisLookModal.handleArrowClick,
//      ShopThisLookProductList.handleArrowClick, MobilePlayer.toggleList.

export interface PostViewerEvents {
  /**
   * Fired when a thumbnail is clicked and the viewer opens.
   * - No-op when a player is active (mobile or desktop) — players fire their own opened events.
   * - `stlOpened`  — STL is 'product_list', or 'modal' and the post has products.
   * - `postOpened` — STL is 'none'.
   */
  triggerOpenEvent: (post: IMedia) => void;
  /**
   * Fired when the viewer is closed.
   * - No-op when a player is active (mobile or desktop) — players fire their own closed events.
   * - `stlClosed`  — STL is 'product_list', or 'modal' and the post has products.
   * - `postClosed` — STL is 'none'.
   */
  triggerCloseEvent: (post: IMedia) => void;
  /**
   * Fired when the user navigates between posts via arrow buttons.
   * - `stlNavigation`  — STL is 'product_list', or 'modal' and the post has products.
   * - `postNavigation` — STL is 'none'.
   */
  triggerNavigationEvent: (post: IMedia, direction: Direction) => void;
  /**
   * Fired when the product list panel is toggled inside the mobile player.
   * - `stlOpened` — panel is being opened.
   * - `stlClosed` — panel is being closed.
   */
  triggerStlToggleEvent: (post: IMedia, opening: boolean) => void;
}

export const usePostViewerEvents = (): PostViewerEvents => {
  const store = useStore();

  const triggerOpenEvent = useCallback(
    (post: IMedia) => {
      const { settings } = store.data;

      const isMobilePlayerActive =
        store.isMobile && settings.mobile_player_display !== false;

      const isDesktopPlayerActive =
        !store.isMobile
        && settings.shop_this_look_display === 'product_list'
        && settings.display_desktop_player === true;

      // Players fire their own opened events.
      if (isMobilePlayerActive || isDesktopPlayerActive) return;

      const { shop_this_look_display: stlDisplay } = settings;
      const hasProducts = !!(post.products && post.products.length > 0);
      const isStl =
        stlDisplay === 'product_list' || (stlDisplay === 'modal' && hasProducts);

      store.triggerEvent(isStl ? 'stlOpened' : 'postOpened', { post }, store.data.id);
    },
    [store],
  );

  const triggerCloseEvent = useCallback(
    (post: IMedia) => {
      const { settings } = store.data;

      const isMobilePlayerActive =
        store.isMobile && settings.mobile_player_display !== false;

      const isDesktopPlayerActive =
        !store.isMobile
        && settings.shop_this_look_display === 'product_list'
        && settings.display_desktop_player === true;

      if (isMobilePlayerActive || isDesktopPlayerActive) return;

      const { shop_this_look_display: stlDisplay } = settings;
      const hasProducts = !!(post.products && post.products.length > 0);
      const isStl =
        stlDisplay === 'product_list' || (stlDisplay === 'modal' && hasProducts);

      if (isStl) {
        store.triggerEvent('stlClosed', { post }, store.data.id);
      } else if (stlDisplay === 'none') {
        store.triggerEvent('postClosed', { post }, store.data.id);
      }
    },
    [store],
  );

  const triggerNavigationEvent = useCallback(
    (post: IMedia, direction: Direction) => {
      const { shop_this_look_display: stlDisplay } = store.data.settings;
      const hasProducts = !!(post.products && post.products.length > 0);
      const isStl =
        stlDisplay === 'product_list' || (stlDisplay === 'modal' && hasProducts);

      store.triggerEvent(
        isStl ? 'stlNavigation' : 'postNavigation',
        { direction, post },
        store.data.id,
      );
    },
    [store],
  );

  const triggerStlToggleEvent = useCallback(
    (post: IMedia, opening: boolean) => {
      store.triggerEvent(
        opening ? 'stlOpened' : 'stlClosed',
        { post },
        store.data.id,
      );
    },
    [store],
  );

  return { triggerOpenEvent, triggerCloseEvent, triggerNavigationEvent, triggerStlToggleEvent };
};

export default usePostViewerEvents;