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

import { ipcChannels } from '../../shared/ipc/contracts';
import { useEditorI18n } from '../editor/i18n/EditorI18nContext';
import { getDndApi } from '../shared/dndApi';
import {
  PlaylistsPanel,
  playlistsPanelLabelsFromT,
} from '../shared/playlists/PlaylistsPanel';

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

export function PlaylistsApp() {
  const { t } = useEditorI18n();
  const api = getDndApi();
  const labels = useMemo(() => playlistsPanelLabelsFromT(t), [t]);

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

  return (
    <div className={styles.page} data-testid="playlists-app">
      <PlaylistsPanel labels={labels} className={styles.panel} readOnly />
    </div>
  );
}