import { useMemo } from 'react';

import useIsLargeScreen from '~/src/hooks/useIsLargeScreen';
import { useTracker } from '~/src/lib/tracker/useTracker';
import { toLinkType } from '~/src/lib/utils/analytics';
import copyToClipboard from '~/src/lib/utils/copyToClipboard';
import ModalActions from '../ModalActions';
import { useAppToast } from '../NextApp/lib/CoreUi';
import {
  shareToEmail,
  shareToFacebook,
  shareToMessenger,
  shareToTelegram,
  shareToTwitter,
  shareToWhatsapp,
  shareToWhatsappWeb,
} from './lib/utils';

export interface ModalShareProps {
  onClose: () => void;
  shareUrl?: string;
  shareText?: string;
}

const ModalShare = ({ onClose, shareText, shareUrl }: ModalShareProps) => {
  const isLargeScreen = useIsLargeScreen();
  const { trackEvent } = useTracker();
  const toast = useAppToast();

  const trackShareEvent = (shareType: string) =>
    trackEvent({
      type: 'share',
      shareType,
    });

  // fallbacks
  if (typeof window !== 'undefined') {
    shareText = shareText || document.title;
    shareUrl = shareUrl || location.href;
  }

  return (
    <ModalActions
      onClose={onClose}
      items={useMemo(
        () => [
          {
            content: 'Copy link',
            onClick: () => {
              copyToClipboard(shareUrl!);
              trackShareEvent('copy');

              trackEvent({
                type: 'link-copied',
                linkType: toLinkType(shareUrl!),
              });

              toast({
                text: 'Link copied to clipboard',
              });
            },
          },
          {
            content: 'Facebook',
            onClick: () => {
              shareToFacebook({
                text: shareText,
                url: shareUrl,
                hashtag: 'ListenAnywhere',
                redirectUrl: window.location.href,
              });

              trackShareEvent('facebook');
            },
          },
          {
            content: 'X',
            onClick: () => {
              shareToTwitter({
                text: shareText,
                url: shareUrl,
                hashtags: ['NowPlaying'],
                via: 'songwhip',
                related: ['songwhip'],
              });

              trackShareEvent('twitter');
            },
          },
          {
            content: 'Whatsapp',
            onClick: () => {
              const share = isLargeScreen
                ? shareToWhatsappWeb
                : shareToWhatsapp;

              share({
                text: shareUrl,
              });

              trackShareEvent('whatsapp');
            },
          },
          !isLargeScreen && {
            content: 'Messenger',
            onClick: () => {
              shareToMessenger({
                url: shareUrl,
              });

              trackShareEvent('messenger');
            },
          },
          !isLargeScreen && {
            content: 'Telegram',
            onClick: () => {
              shareToTelegram({
                text: shareUrl!,
              });

              trackShareEvent('telegram');
            },
          },
          {
            content: 'Email',
            onClick: () => {
              shareToEmail({
                subject: shareText,
                body: shareUrl,
              });

              trackShareEvent('email');
            },
          },
        ],
        [shareText, shareUrl]
      )}
    />
  );
};

export default ModalShare;