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,
    },
  };

  relation = props.item.relation;
});

describe('TemplateOne component', () => {
  test('render with props', () => {
    const { container } = render(<TemplateOne {...props} />);
    expect(container).toBeTruthy();
  });
  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/1656339756/casumo-casino-logo.svg'
      );
      expect(img[0]).toHaveAttribute('width', '88');
      expect(img[0]).toHaveAttribute('height', '88');
      expect(getByText(relation.name)).toBeTruthy();
    });
  });
  // test('show correct author image', async () => {
  //   // eslint-disable-next-line global-require
  //   const func = require('gatsby-core-theme/src/helpers/device-detect');
  //   func.isNativeImageLazyLoadingSupported = jest.fn(() => true);

  //   render(<TemplateOne {...props} />);

  //   await waitFor(() => {
  //     const img = screen.getByAltText(props.item.author.name);
  //     expect(img).toBeVisible();
  //     expect(img).toHaveAttribute(
  //       'src',
  //       'https://cdn.images.com/fit-in/21x21/1666946339/cameron-murphy.png'
  //     );
  //     expect(img).toHaveAttribute('width', '21');
  //     expect(img).toHaveAttribute('height', '21');
  //   });
  // });
  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).toBeTruthy();
      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('show correct bonus text', async () => {
  //   const { container } = render(<TemplateOne {...props} />);

  //   await waitFor(() => {
  //     expect(container.querySelectorAll('.detailsBox span').length).toBe(2);
  //     expect(container.querySelectorAll('.detailsBox span')[0].innerHTML).toBe(
  //       relation.one_liners.main.one_liner.split('+')[0].replace('&', '&amp;')
  //     );
  //     expect(container.querySelectorAll('.detailsBox span')[1].innerHTML).toBe(
  //       `+${relation.one_liners.main.one_liner.split('+')[1]}`
  //     );
  //   });
  // });
  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.bonus.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.bonus.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.bonus.deposit_methods = null;
    const { container } = render(<TemplateOne {...props} />);

    await waitFor(() => {
      expect(container.querySelector('.paymentMethods')).toBeFalsy();
    });
  });
  test('show correct tnc text not fixed, not collapsed', async () => {
    const { container } = render(<TemplateOne {...props} />);

    await waitFor(() => {
      expect(container.querySelectorAll('.tnc div')[0].innerHTML).toEqual(
        '18+ New Players only. Play responsibly.'
      );
      expect(container.querySelectorAll('.tnc.tncCollapse')[0]).toBeFalsy();
      expect(container.querySelectorAll('.tnc.tncFixed')[0]).toBeFalsy();
    });
  });
  test('show correct tnc collapsed', async () => {
    const { container } = render(<TemplateOne {...props} tncCollapse />);

    await waitFor(() => {
      expect(container.querySelectorAll('.tnc.tncCollapse')[0]).toBeTruthy();
      expect(container.querySelectorAll('.tnc.tncFixed')[0]).toBeFalsy();
    });
  });
  test('show correct tnc fixed', async () => {
    const { container } = render(<TemplateOne {...props} tncFixed />);

    await waitFor(() => {
      expect(container.querySelectorAll('.tnc.tncCollapse')[0]).toBeFalsy();
      expect(container.querySelectorAll('.tnc.tncFixed')[0]).toBeTruthy();
    });
  });
  test('if no tnc, show nothing', async () => {
    props.item.relation.extra_fields.terms_and_conditions_text_enabled = '0';
    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();
});
