import {
  createMemoryHistory,
  createRouter,
  type RouterHistory,
} from '@tanstack/react-router';
import { render, RenderResult, screen, within } from '@testing-library/react';

import { createSelectWrapper } from '@nuclearplayer/ui';

import App from '../../App';
import { routeTree } from '../../routeTree.gen';

export const SourcesWrapper = {
  async mount(): Promise<RenderResult & { history: RouterHistory }> {
    const history = createMemoryHistory({ initialEntries: ['/sources'] });
    const router = createRouter({ routeTree, history });
    const component = render(<App routerProp={router} />);
    await screen.findByTestId('sources-view');
    return { ...component, history };
  },

  section(kind: string) {
    const getElement = () => screen.getByTestId(`sources-section-${kind}`);
    return {
      get element() {
        return getElement();
      },
      providerSelect: createSelectWrapper(getElement),
      get providerNames() {
        return within(getElement())
          .getAllByTestId('provider-list-item')
          .map((el) => el.textContent!.trim());
      },
      get lockedReason() {
        return within(getElement()).queryByTestId('locked-reason');
      },
      get emptyState() {
        return within(getElement()).queryByTestId('no-providers-message');
      },
      get select() {
        return within(getElement()).queryByRole('button');
      },
      provider(name: string) {
        return {
          get warning() {
            return within(getElement()).getByTestId(`provider-warning-${name}`);
          },
        };
      },
    };
  },
};
