import React from 'react';
import { render, cleanup, waitFor } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';

import '~tests/helpers/match-media.mock';
import Module from '.';
import { getListContentData, contentTableOne } from '~tests/factories/modules/content.factory';
import { objectsHolder } from '~tests/factories/modules/modules.factory';

const getAnchorList = (number = 1) => {
  function anchor(idNumber) {
    return {
      label: `Game Selection  ${idNumber}`,
      slug: `game-selection  ${idNumber}`,
      type: `module ${idNumber}`,
    };
  }

  const arr = [];
  for (let i = 0; i < number; i += 1) {
    arr.push(anchor(i));
  }

  return arr;
};

const getCaruselData = (number) => {
  function caruselImg(idNumber) {
    return {
      image: `http://imgSrc//${idNumber}`,
    };
  }

  const arr = [];
  for (let i = 0; i < number; i += 1) {
    arr.push(caruselImg(i));
  }

  return arr;
};

describe('Modules Component ', () => {
  test('render with props', async () => {
    const contents = getListContentData(1);
    const { container, getAllByText } = render(
      <Module
        module={{
          name: 'content',
          anchor_label: 'my label',
          ...contents[0],
        }}
      />
    );
    await waitFor(() => {
      expect(container).toBeTruthy();
      expect(getAllByText('Hello')).toBeTruthy();
      expect(container.querySelector('#my-label')).toBeTruthy();
      expect(container.querySelectorAll('h2')).toHaveLength(1);
      expect(getAllByText('Test Content 1')).toBeTruthy();
    });
  });
  test('title no tag', () => {
    const { container } = render(<Module module={{ name: 'content', ...contentTableOne }} />);
    expect(container.querySelectorAll('h2')).toHaveLength(1);
  });

  test('Swich for All component', () => {
    const arr = [
      'content',
      'top_list',
      'cards',
      'cards_v2',
      'pros_and_cons',
      'accordion',
      'bonus',
      'image',
      'spotlights',
    ];
    arr.forEach((title) => {
      const data = objectsHolder(title);

      const { container } = render(
        <Module
          module={{
            name: title,
            anchor_label: title,
            ...data,
          }}
          page={{ template: 'default' }}
        />
      );

      expect(container.querySelector('div')).toBeTruthy();
    });
  });

  test('Anchor and archive without moduleItem items', () => {
    const arr = ['archive', 'anchor'];

    arr.forEach((elm) => {
      const { container } = render(
        <Module
          module={{
            name: elm,
            items: [],
          }}
        />
      );
      expect(container.querySelector('div')).toBe(null);
    });
  });

  test('Anchor and archive with moduleItem', () => {
    const arr = ['archive', 'anchor'];

    arr.forEach((elm) => {
      const content = getAnchorList(3);
      const { container } = render(
        <Module
          module={{
            name: elm,
            items: content,
          }}
        />
      );
      // console.log('getByText(container)', getByText(container))
      expect(container).toBeTruthy();
    });
  });

  test('carousel without data', () => {
    const { container } = render(
      <Module
        module={{
          name: 'carousel',
          items: [{ image: null }],
        }}
      />
    );

    expect(container.querySelector('div')).toBe(null);
  });

  test('carusel with data', () => {
    const data = getCaruselData(3);
    const { container } = render(
      <Module
        module={{
          name: 'carousel',
          items: data,
        }}
      />
    );
    expect(container).toBeTruthy();
  });

  test('module name is not in swich', () => {
    const { container } = render(
      <Module
        module={{
          name: 'test',
        }}
      />
    );
    expect(container.querySelector('div')).toBe(null);
  });
});
afterEach(() => {
  cleanup();
});
