import React from 'react';
import { render, cleanup } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import '~tests/helpers/match-media.mock';
import Header, { relationContent } from '.';

function getHeaderSection(type = 'page', template = 'author') {
  const header = {
    section: {
      page: {
        relation_type: `${type}`,
        template: `${template}`,
        title: 'The Page Title',
        path: 'sport/brand',
        page_styles: {
          short_name: 'template_one',
        },
        sections: {
          header: {
            extra_fields: {
              header_background_image: '398f163bfd5a201716fb42aa72ae48b0.jpeg',
              header_tesxt: '<p><i>Hello</i> I am test text</p>',
            },
          },
        },
      },
    },
  };

  return header;
}

describe('header component', () => {
  test('relationContent', () => {
    const list = ['article', 'operator', 'game', 'author'];

    const all = list.reduce((acc, current) => {
      acc.push(getHeaderSection(current, current));
      return acc;
    }, []);

    all.forEach((elm) => {
      expect(relationContent(elm.section)).toBeTruthy();
    });
    expect(relationContent('test')).toBeFalsy();
  });

  test('only page', () => {
    const HeaderProps = getHeaderSection('page', 'default');
    const { container } = render(<Header {...HeaderProps} />);

    expect(container.querySelectorAll('header')).toHaveLength(1);
  });

  test('render', () => {
    const HeaderProps = getHeaderSection();

    const { container } = render(<Header {...HeaderProps} />);
    expect(container.querySelector('header')).toBeTruthy();
    expect(container.querySelectorAll('header')).toHaveLength(1);
  });

  test('article', () => {
    const operatorShallowData = getHeaderSection('article', 'article');
    const { container } = render(<Header {...operatorShallowData} />);
    expect(container.querySelector('header')).toBeTruthy();
    expect(container.querySelectorAll('header')).toHaveLength(1);
  });
  test('operator', () => {
    const operatorShallowData = getHeaderSection('operator', 'operator-review');
    operatorShallowData.section.page.page_styles.short_name = 'template_two';
    const { container } = render(<Header {...operatorShallowData} />);
    expect(container.querySelector('header')).toBeTruthy();
    expect(container.querySelectorAll('header')).toHaveLength(1);
  });
  test('author', () => {
    const operatorShallowData = getHeaderSection('author', 'author');
    operatorShallowData.section.page.page_styles.short_name = 'template_three';
    const { container } = render(<Header {...operatorShallowData} />);
    expect(container.querySelector('header')).toBeTruthy();
    expect(container.querySelectorAll('header')).toHaveLength(1);
  });
  test('page', () => {
    const operatorShallowData = getHeaderSection('author', 'author');
    operatorShallowData.section.page.page_styles.short_name = 'template_two';
    const { container } = render(<Header {...operatorShallowData} />);
    expect(container.querySelector('header')).toBeTruthy();
    expect(container.querySelectorAll('header')).toHaveLength(1);
  });
  test('payment_method', () => {
    const operatorShallowData = getHeaderSection('payment_method', 'payment_method');
    operatorShallowData.section.page.page_styles.short_name = 'template_one';
    const { container } = render(<Header {...operatorShallowData} />);
    expect(container.querySelector('header')).toBeTruthy();
    expect(container.querySelectorAll('header')).toHaveLength(1);
  });
  test('payment_method Template two', () => {
    const operatorShallowData = getHeaderSection('payment_method', 'payment_method');
    operatorShallowData.section.page.page_styles.short_name = 'template_two';
    const { container } = render(<Header {...operatorShallowData} />);
    expect(container.querySelector('header')).toBeTruthy();
    expect(container.querySelectorAll('header')).toHaveLength(1);
  });
  test('payment_method Template Three', () => {
    const operatorShallowData = getHeaderSection('payment_method', 'payment_method');
    operatorShallowData.section.page.page_styles.short_name = 'template_three';
    const { container } = render(<Header {...operatorShallowData} />);
    expect(container.querySelector('header')).toBeTruthy();
    expect(container.querySelectorAll('header')).toHaveLength(1);
  });
  test('payment_method Template Four', () => {
    const operatorShallowData = getHeaderSection('payment_method', 'payment_method');
    operatorShallowData.section.page.page_styles.short_name = 'template_four';
    const { container } = render(<Header {...operatorShallowData} />);
    expect(container.querySelector('header')).toBeTruthy();
    expect(container.querySelectorAll('header')).toHaveLength(1);
  });
});
afterEach(() => {
  cleanup();
});
