import { CloseOutlined } from '@ant-design/icons';
import { Button } from 'antd';
import { useEffect } from 'react';
import { BaseballTicketBayPlayAppView } from '../../views/play/apps/baseball-ticket-bay/BaseballTicketBayPlayAppView';
import { EReaderAppView } from '../../views/play/apps/e-reader/EReaderAppView';
import { PhotoPuzzleAppView } from '../../views/play/apps/photo-puzzle/PhotoPuzzleAppView';
import { PhotoPrismAppView } from '../../views/play/apps/photoprism/PhotoPrismAppView';
import { TheQuestAppView } from '../../views/play/apps/the-quest/TheQuestAppView';
import { TetrisAppView } from '../../views/play/apps/tetris/TetrisAppView';
import { Template1PlayAppView } from '../../views/play/apps/template1/Template1PlayAppView';

type PlayAppOverlayProps = {
  appId: string;
  label: string;
  onClose: () => void;
};

const BODY_OPEN_CLASS = 'play-app-overlay-open';

function renderPlayApp(appId: string, onClose: () => void) {
  if (appId === 'e-reader') {
    return <EReaderAppView onBack={onClose} launchContext="embedded" />;
  }

  if (appId === 'baseball-ticket-bay') {
    return <BaseballTicketBayPlayAppView onBack={onClose} launchContext="embedded" />;
  }

  if (appId === 'photoprism') {
    return <PhotoPrismAppView onBack={onClose} launchContext="embedded" />;
  }

  if (appId === 'photo-puzzle') {
    return <PhotoPuzzleAppView onBack={onClose} launchContext="embedded" />;
  }

  if (appId === 'tetris') {
    return <TetrisAppView onBack={onClose} launchContext="embedded" />;
  }

  if (appId === 'the-quest') {
    return <TheQuestAppView onBack={onClose} launchContext="embedded" />;
  }

  if (appId === 'template1') {
    return <Template1PlayAppView onBack={onClose} launchContext="embedded" />;
  }

  return null;
}

export function PlayAppOverlay({ appId, label, onClose }: PlayAppOverlayProps) {
  useEffect(() => {
    document.body.classList.add(BODY_OPEN_CLASS);

    return () => {
      document.body.classList.remove(BODY_OPEN_CLASS);
    };
  }, []);

  useEffect(() => {
    const handleKeyDown = (event: KeyboardEvent) => {
      if (event.key === 'Escape') {
        onClose();
      }
    };

    window.addEventListener('keydown', handleKeyDown);

    return () => {
      window.removeEventListener('keydown', handleKeyDown);
    };
  }, [onClose]);

  const app = renderPlayApp(appId, onClose);

  if (!app) {
    return null;
  }

  const isPhotoPrism = appId === 'photoprism';

  return (
    <div className="play-app-overlay" aria-label={`${label} 오버레이`}>
      <button type="button" className="play-app-overlay__backdrop" aria-label="앱 오버레이 닫기" onClick={onClose} />
      {!isPhotoPrism ? (
        <section className="play-app-overlay__surface">
          <Button
            type="text"
            aria-label={`${label} 닫기`}
            className="play-app-overlay__close"
            icon={<CloseOutlined />}
            onClick={onClose}
          />
          <div className="play-app-overlay__viewport">{app}</div>
        </section>
      ) : null}
      {isPhotoPrism ? app : null}
    </div>
  );
}
