import React, { useMemo } from 'react';
import { createPortal } from 'react-dom';

import { Button } from '../shared/ui/controls';
import {
  PlaylistsPanel,
  playlistsPanelLabelsFromT,
} from '../shared/playlists/PlaylistsPanel';

import styles from './EditorApp.module.css';
import { useEditorI18n } from './i18n/EditorI18nContext';
import panelStyles from './PlaylistsModal.module.css';

export function PlaylistsManagerModal({
  open,
  onClose,
}: {
  open: boolean;
  onClose: () => void;
}) {
  const { t } = useEditorI18n();
  const labels = useMemo(() => playlistsPanelLabelsFromT(t), [t]);
  if (!open) return null;

  return createPortal(
    <>
      <div className={styles.modalBackdrop} aria-hidden onClick={onClose} />
      <div
        className={[styles.modalDialog, panelStyles.dialog].join(' ')}
        role="dialog"
        aria-modal="true"
        data-testid="playlists-modal"
      >
        <div className={styles.modalHeader}>
          <div className={styles.modalTitle}>{t('playlists.title')}</div>
          <button type="button" aria-label={t('common.close')} onClick={onClose} className={styles.modalClose}>
            ×
          </button>
        </div>
        <div className={panelStyles.body}>
          <PlaylistsPanel labels={labels} />
        </div>
        <div className={styles.modalFooter}>
          <Button variant="ghost" onClick={onClose}>
            {t('common.close')}
          </Button>
        </div>
      </div>
    </>,
    document.body,
  );
}