import type { IPlaylistCard, IVideoCard } from '../types';

export type ReportTargetType = 'video' | 'playlist';

/** Управляет состоянием попапа жалобы на видео или плейлист. */
export const useReportPopup = () => {
  const isReportPopupOpen = useState('report-popup-open', () => false);
  const reportedVideoCard = useState<IVideoCard>('report-popup-card', () => ({} as IVideoCard));
  const reportedPlaylistCard = useState<IPlaylistCard>('report-popup-playlist-card', () => ({} as IPlaylistCard));
  const reportTargetType = useState<ReportTargetType>('report-popup-target-type', () => 'video');
  const reportedUrl = useState('report-popup-url', () => '');
  const reportedGuid = useState('report-popup-guid', () => '');
  const onBack = useState<(() => void) | null>('report-popup-on-back', () => null);

  const openReportPopup = (card: IVideoCard, onBackCallback?: () => void) => {
    reportTargetType.value = 'video';
    reportedVideoCard.value = card;
    reportedUrl.value = `/videos/${card.id}`;
    reportedGuid.value = card.guid;
    isReportPopupOpen.value = true;
    onBack.value = onBackCallback ?? null;
  };

  const openPlaylistReportPopup = (card: IPlaylistCard, onBackCallback?: () => void) => {
    reportTargetType.value = 'playlist';
    reportedPlaylistCard.value = card;
    reportedUrl.value = card.firstVideoId ? `/playlists/${card.id}/${card.firstVideoId}` : `/playlists/${card.id}`;
    reportedGuid.value = card.id;
    isReportPopupOpen.value = true;
    onBack.value = onBackCallback ?? null;
  };

  const closeReportPopup = () => {
    isReportPopupOpen.value = false;
    onBack.value = null;
  };

  return {
    isReportPopupOpen,
    openReportPopup,
    openPlaylistReportPopup,
    closeReportPopup,
    reportedVideoCard,
    reportedPlaylistCard,
    reportTargetType,
    reportedUrl,
    reportedGuid,
    onBack,
  };
};