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

import {
  getExtraField,
  translate,
  imagePrettyUrl,
  getBonus,
} from 'gatsby-core-theme/src/helpers/getters';
import MainProvider from '~context/MainProvider';
import getPageData from '../../../../../../../tests/factories/pages/default.factory';
import TemplateTwo from '.';

const translations = {
  claim_reward: 'Claim Rewards',
  welcome_bonus: 'Welcome Bonus',
};

function renderComponent(pageData) {
  return render(
    <MainProvider
      value={{
        bannerIsActive: false,
        cookieAccepted: true,
        translations,
      }}
    >
      <TemplateTwo extraFields={pageData.extra_fields} imageObj={pageData.featured_image_object} />
    </MainProvider>
  );
}

let data;

beforeEach(() => {
  data = getPageData();
});
describe('Show template two', () => {
  test('render with props', () => {
    const { container } = renderComponent(data);
    expect(container.querySelector('.templateTwo')).toBeTruthy();
  });
  test('render without featured image', () => {
    data.featured_image_object = null;

    // eslint-disable-next-line global-require
    const func = require('gatsby-core-theme/src/helpers/device-detect');
    func.isNativeImageLazyLoadingSupported = jest.fn(() => true);

    const { container } = renderComponent(data);
    expect(container.querySelector('img')).toBeFalsy();
    expect(container.querySelector('.blendColors')).toBeTruthy();
  });
  test('show correct oneLiner', () => {
    const { container } = renderComponent(data);
    expect(container.querySelector('.headerContainer').querySelector('h1')).toBeTruthy();
    expect(container.querySelector('.headerContainer').querySelector('h1').innerHTML).toBe(
      getBonus('main', getExtraField(data?.extra_fields, 'operator'))
        .one_liner.replace('+', '&')
        .replace('&', '&amp;')
    );
  });
  test('show correct url', () => {
    const { container } = renderComponent(data);
    expect(
      container.querySelector('.headerContainer').querySelector('a').innerHTML.split('<svg')[0]
    ).toEqual(translate(translations, 'online_casino', getExtraField(data?.extra_fields, 'link')));
  });
  test('show correct image', () => {
    const imgObj = data.featured_image_object;

    // eslint-disable-next-line global-require
    const func = require('gatsby-core-theme/src/helpers/device-detect');
    func.isNativeImageLazyLoadingSupported = jest.fn(() => true);
    const { container } = renderComponent(data);

    expect(container.querySelector('img')).toBeTruthy();
    expect(container.querySelector('img')).toHaveAttribute(
      'src',
      imagePrettyUrl(imgObj.filename, imgObj.width, imgObj.height)
    );
    expect(container.querySelector('img')).toHaveAttribute('loading', 'eager');
  });
  test('show correct tcn', () => {
    const { container } = renderComponent(data);
    expect(container.querySelector('.tnc div').innerHTML).toBe(
      '18+ New Players only. Play responsibly.'
    );
  });
});
afterEach(() => {
  cleanup();
});
