import { h } from 'preact';
import { render, fireEvent, waitFor } from '@testing-library/preact';
import { ModerationArticles } from '../moderationArticles';

const getTestArticles = () => {
  const articles = [
    {
      id: 1,
      title: 'An article title',
      path: 'an-article-title-di3',
      published_at: '2019-06-22T16:11:10.590Z',
      cached_tag_list: 'discuss, javascript, beginners',
      user: {
        articles_count: 1,
        name: 'hello',
        id: 1,
      },
    },
    {
      id: 2,
      title:
        'An article title that is quite very actually rather extremely long with all things considered',
      path: 'an-article-title-that-is-quite-very-actually-rather-extremely-long-with-all-things-considered-fi8',
      published_at: '2019-06-24T09:32:10.590Z',
      cached_tag_list: '',
      user: {
        articles_count: 3,
        name: 'howdy',
        id: 2,
      },
    },
  ];
  return JSON.stringify(articles);
};

describe('<ModerationArticles />', () => {
  beforeEach(() => {
    render(
      <div
        class="mod-index-list"
        id="mod-index-list"
        data-articles={getTestArticles()}
      >
        <div
          data-testid="flag-user-modal-container"
          class="flag-user-modal-container hidden"
        />
      </div>,
    );
  });

  it('renders a list of 2 articles', () => {
    render(<ModerationArticles />);

    const listOfArticles = document.querySelectorAll(
      '[data-testid^="mod-article-"]',
    );
    expect(listOfArticles.length).toEqual(2);
  });

  it('renders the iframes on click', async () => {
    const { getByTestId } = render(<ModerationArticles />);
    const singleArticle = getByTestId('mod-article-1');
    const summarySection = singleArticle.getElementsByTagName('summary')[0];
    summarySection.click();
    await waitFor(() => {
      const iframes = singleArticle.getElementsByTagName('iframe');
      expect(iframes.length).toEqual(2);
    });
  });

  it('toggles the "opened" class when opening or closing an article', async () => {
    const { getByTestId } = render(<ModerationArticles />);
    const singleArticle = getByTestId('mod-article-2');
    const summarySection = singleArticle.getElementsByTagName('summary')[0];

    fireEvent.click(summarySection);
    await waitFor(() => {
      expect(
        singleArticle.getElementsByClassName('article-iframes-container')[0]
          .classList,
      ).toContain('opened');
    });

    fireEvent.click(summarySection);
    await waitFor(() => {
      expect(
        singleArticle.getElementsByClassName('article-iframes-container')[0]
          .classList,
      ).not.toContain('opened');
    });
  });

  it('adds the FlagUser Modal HTML associated with author when article opened', async () => {
    const { getByTestId, findByTestId } = render(<ModerationArticles />);
    const expectedArticleId = 2;

    expect(
      document.querySelector('[data-testid="flag-user-modal"]'),
    ).toBeNull();

    const singleArticle = getByTestId(`mod-article-${expectedArticleId}`);
    const summarySection = singleArticle.getElementsByTagName('summary')[0];

    summarySection.click();

    // We need the iframe to load first before checking for the modal having been loaded.
    await findByTestId(`mod-iframe-${expectedArticleId}`);

    const flagUserModal = document.querySelector(
      '[data-testid="flag-user-modal"]',
    );

    expect(flagUserModal).not.toBeNull();

    const actualArticleId = Number(
      flagUserModal.getElementsByTagName('input')[0].dataset.reactableId,
    );

    expect(actualArticleId).toEqual(expectedArticleId);
  });
});