import type { Media } from '$lib/Data/AniList/media';
import { get } from 'svelte/store';
import type { SubsPleaseEpisode } from '../Anime/Airing/Subtitled/subsPlease';
import settings from '$stores/settings';

export interface HoverCoverResponse {
  // OnMouseEnterLeave
  hovering?: boolean;
  item?: SubsPleaseEpisode | null;
  media?: Media | null;

  // OnMouseMove
  height?: number;
  style?: string;
}

export const onMouseEnter = (
  media: Media | Partial<Media> | null,
  item: SubsPleaseEpisode | null = null
) => {
  if (!get(settings).displayHoverCover && !item)
    return { hovering: false, item: null, media: null } as HoverCoverResponse;

  return { hovering: true, item, media } as HoverCoverResponse;
};

export const onMouseLeave = () => {
  return { hovering: false, item: null, media: null } as HoverCoverResponse;
};

export const onMouseMove = (event: MouseEvent, imageWidth = 250) => {
  const offset = 10;
  let imageLeft = 0;
  let imageTop = 0;
  const elements = document.getElementsByClassName('hover-image');

  if (elements.length === 0) return { height: 0, style: '' } as HoverCoverResponse;

  const response: HoverCoverResponse = {
    height: (elements[0] as HTMLImageElement).height,
    style: ''
  };
  const height = response.height || 0;

  imageLeft =
    event.pageX + height + offset > window.innerWidth
      ? event.pageX - imageWidth - offset
      : event.pageX + offset;
  imageTop =
    event.pageY - window.scrollY + height + offset > window.innerHeight
      ? event.pageY - window.scrollY - height - offset
      : event.pageY - window.scrollY + offset;
  response.style = `top: ${imageTop}px; left: ${imageLeft}px;`;

  return response;
};