import React from 'react';
import { render, cleanup, waitFor, screen } from '@testing-library/react';
import { getSampleOperatorCards } from 'gatsby-core-theme/tests/factories/modules/card.factory';
import TemplateOne from './index';

let data;
let props;
let relation;

beforeEach(() => {
  data = getSampleOperatorCards();

  props = {
    item: data.items[0],
    page: {
      template: 'operator_review',
      true_votes: 134,
      false_votes: 20,
    },
    tnc: {
      operator: data.items[0].relation,
    },
  };

  relation = props.item.relation;
});

describe('TemplateOne component', () => {
  test('show correct logo and title', async () => {
    // eslint-disable-next-line global-require
    const func = require('gatsby-core-theme/src/helpers/device-detect');
    func.isNativeImageLazyLoadingSupported = jest.fn(() => true);

    const { container, getByText } = render(<TemplateOne {...props} />);

    await waitFor(() => {
      const img = container.getElementsByClassName('image');
      expect(img[0]).toBeVisible();
      expect(img[0]).toHaveAttribute('src', 'https://cdn.images.com/1680183185/wildz.svg');
      expect(img[0]).toHaveAttribute('width', '88');
      expect(img[0]).toHaveAttribute('height', '88');
      expect(getByText(relation.name)).toBeInTheDocument();
    });
  });
  test('if no author data, show nothing', async () => {
    props.item.author = null;
    const { container } = render(<TemplateOne {...props} />);

    await waitFor(() => {
      expect(container.querySelector('.authorData')).toBeFalsy();
    });
  });
  test('show correct review link', async () => {
    const { getByText } = render(<TemplateOne {...props} />);
    const link = getByText(`${relation.name} Review`);

    await waitFor(() => {
      expect(link).toBeInTheDocument();
      expect(link).toHaveAttribute('href', props.item.path);
    });
  });
  test('show correct selling points', async () => {
    const { container } = render(<TemplateOne {...props} />);

    await waitFor(() => {
      expect(container.querySelectorAll('.cardContentContainer ul li').length).toBe(3);
      expect(
        container.querySelector('.cardContentContainer ul li').innerHTML.split('</svg>')[1]
      ).toBe(relation.selling_points[0]);
      expect(
        container.querySelectorAll('.cardContentContainer ul li')[2].innerHTML.split('</svg>')[1]
      ).toBe(relation.selling_points[2]);
    });
  });
  test('if no selling points data, show nothing', async () => {
    props.item.relation.selling_points = null;
    const { container } = render(<TemplateOne {...props} />);

    await waitFor(() => {
      expect(container.querySelector('.sellingPoints')).toBeFalsy();
    });
  });
  test('hide bonus text if operator inactive', async () => {
    props.item.relation.status = 'inactive';
    const { container } = render(<TemplateOne {...props} />);

    await waitFor(() => {
      expect(container.querySelector('.casinoText')).toBeFalsy();
    });
  });
  test('show correct payment methods', async () => {
    // eslint-disable-next-line global-require
    const func = require('gatsby-core-theme/src/helpers/device-detect');
    func.isNativeImageLazyLoadingSupported = jest.fn(() => true);

    const { container } = render(<TemplateOne {...props} />);
    const img = screen.getByAltText(relation.deposit_methods[0].name);

    await waitFor(() => {
      expect(container.querySelectorAll('.paymentMethods li').length).toBe(5);
      expect(container.querySelectorAll('.paymentMethods li img').length).toBe(4);
      expect(container.querySelectorAll('.paymentMethods li')[4].innerHTML).toBe(
        `+${relation.deposit_methods.length - 4}`
      );

      expect(img).toBeVisible();
      expect(img).toHaveAttribute('src', 'https://cdn.images.com/1680181972/visa.svg');
      expect(img).toHaveAttribute('width', '54');
      expect(img).toHaveAttribute('height', '36');
    });
  });
  test('if no deposit methods data, show nothing', async () => {
    props.item.relation.deposit_methods = null;
    const { container } = render(<TemplateOne {...props} />);

    await waitFor(() => {
      expect(container.querySelector('.paymentMethods')).toBeFalsy();
    });
  });
  test('show correct tnc fixed', () => {
    const { getByText } = render(<TemplateOne {...props} />);
    expect(getByText('test tncs')).toBeInTheDocument();
  });
  test('if no tnc, show nothing', async () => {
    props.item.relation.bonuses.main.terms_and_conditions_enabled = false;
    const { container } = render(<TemplateOne {...props} />);

    await waitFor(() => {
      expect(container.querySelector('.tnc')).toBeFalsy();
    });
  });

  test('should render ribbons when showRibbon is true', () => {
    props.item.relation.ribbons = ['New'];
    const { container } = render(<TemplateOne item={props.item} showRibbon />);
    const ribbonElement = container.querySelector('.ribbon');
    expect(ribbonElement).toBeInTheDocument();
    expect(ribbonElement.textContent).toBe('New');
  });
  test('should not render ribbons when showRibbon is false', () => {
    const { container } = render(<TemplateOne item={props.item} />);
    const ribbonElement = container.querySelector('.ribbon');
    expect(ribbonElement).not.toBeInTheDocument();
  });
  test('should not render ribbons when ribbons array is empty', () => {
    props.item.relation.ribbons = [];
    const { container } = render(<TemplateOne item={props.item} />);
    const ribbonElement = container.querySelector('.ribbon');
    expect(ribbonElement).not.toBeInTheDocument();
  });
});
afterEach(() => {
  cleanup();
});
