import { currentOverviewImageSelector } from '@/redux/project/project.selectors';
import { useSelector } from 'react-redux';
import { OverviewImageLinkConfig } from '../OverviewImageModal.types';
import { getOverviewImageLinkSize } from './getOverviewImageLinkSize';
import { useOvervieImageLinkActions } from './useOverviewImageLinkActions';

interface UseOverviewImageLinksArgs {
  sizeFactor: number;
}

export const useOverviewImageLinkConfigs = ({
  sizeFactor,
}: UseOverviewImageLinksArgs): OverviewImageLinkConfig[] => {
  const { handleOnLinkClick } = useOvervieImageLinkActions();
  const currentImage = useSelector(currentOverviewImageSelector);

  if (!currentImage || !sizeFactor) return [];

  const linkConfigs = currentImage.links.map(link => {
    return {
      idObject: link.idObject,
      size: getOverviewImageLinkSize(link, { sizeFactor }),
      onClick: () => handleOnLinkClick(link),
    };
  });

  return linkConfigs;
};