import React, { useEffect, useState } from 'react';

import { ipcChannels, type SessionState } from '../../shared/ipc/contracts';
import { getDndApi } from '../shared/dndApi';
import { PresentationView } from '../shared/PresentationView';

import styles from './PresentationApp.module.css';

export function PresentationApp() {
  const [session, setSession] = useState<SessionState | null>(null);
  const api = getDndApi();

  useEffect(() => {
    void api.invoke(ipcChannels.project.get, {}).then((res) => {
      setSession({
        project: res.project,
        currentSceneId: res.project?.currentSceneId ?? null,
      });
    });
    return api.on(ipcChannels.session.stateChanged, ({ state }) => setSession(state));
  }, [api]);

  useEffect(() => {
    const onKeyDown = (e: KeyboardEvent) => {
      if (e.key === 'Escape') {
        void api.invoke(ipcChannels.windows.closeMultiWindow, {});
      }
    };
    window.addEventListener('keydown', onKeyDown);
    return () => window.removeEventListener('keydown', onKeyDown);
  }, [api]);

  return (
    <div
      className={styles.root}
      onDoubleClick={() => void api.invoke(ipcChannels.windows.togglePresentationFullscreen, {})}
    >
      <PresentationView session={session} showTitle={false} />
    </div>
  );
}