/* eslint-disable no-multi-assign */
import React from 'react';
import { render, cleanup, fireEvent, waitFor } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import { MdInfo } from '@react-icons/all-files/md/MdInfo';
import MainProvider from '~context/MainProvider';
import getOperatorData from '../../../../tests/factories/pages/operator.factory';
import WageringCalculator from '.';

const props = {
  mainTitle: 'Test Main Title',
  infoTitle: 'Test Info Title',
  infoText: 'Test Info Text',
  infoIcon: MdInfo,
  pageContext: {
    marketSections: {
      recommended_casinos: {
        modules: [
          {
            items: [
              {
                items: [getOperatorData(), getOperatorData()],
              },
            ],
          },
        ],
      },
    },
  },
};

describe('Wagering Calculator', () => {
  test('Template Block', async () => {
    const { container, getByText, queryByText } = render(
      <MainProvider value={{}}>
        <WageringCalculator {...props} />
      </MainProvider>
    );

    expect(getByText('Test Main Title')).toBeTruthy();

    const infoIcon = container.querySelector('svg');
    fireEvent.click(infoIcon);
    expect(getByText('Test Info Title')).toBeTruthy();
    expect(getByText('Test Info Text')).toBeTruthy();

    const icons = container.querySelectorAll('svg');
    fireEvent.click(icons[1]);
    expect(queryByText('Test Info Title')).not.toBeInTheDocument();
    expect(queryByText('Test Info Text')).not.toBeInTheDocument();

    const inputs = container.querySelectorAll('input');
    inputs.forEach((input, i) => {
      input.value = i + 1;
    });
    expect(container.querySelector('.resultContainer')).toBeFalsy();
    const calculate = container.querySelector('form > a');
    fireEvent.click(calculate);
    const select = container.querySelector('select');
    select.selectedIndex = 1;
    fireEvent.click(calculate);
    await waitFor(() => {
      expect(container.querySelector('.resultContainer')).toBeTruthy();
      expect(container.querySelector('.reccommendedCasinos')).toBeTruthy();
      expect(container.querySelectorAll('.reccommendedCasinos > div')).toHaveLength(2);
    });
  });
});

afterEach(() => {
  cleanup();
});
