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

/* eslint-disable no-underscore-dangle */

describe('Search Component', () => {
  describe('Search Form', () => {
    test('Render', () => {
      const formSearchOptions = {
        searchButtonComponent: <button type="submit">Search Me!</button>,
      };
      const { container } = render(
        <Search inputPlaceholder="Your Search" formSearchOptions={formSearchOptions}>
          {(item) => (
            <>
              <div className="result" type="operator">
                {item.title}
              </div>
              <div className="result" type="article">
                {item.title}
              </div>
            </>
          )}
        </Search>
      );

      const input = container.querySelectorAll('input');
      expect(input).toHaveLength(1);
      expect(input[0].getAttribute('placeholder')).toEqual('Your Search');
      const button = container.querySelectorAll('button');
      expect(button).toHaveLength(1);
    });

    test('Auto Complete', async () => {
      const formSearchOptions = {
        autoComplete: true,
        sort: true,
        searchButtonComponent: <button type="submit">Search Me!</button>,
        limit: 3,
      };

      const { container } = render(
        <Search formSearchOptions={formSearchOptions}>
          {(item) => (
            <>
              <div className="result" type="operator">
                {item.title}
              </div>
              <div className="result" type="article">
                {item.title}
              </div>
            </>
          )}
        </Search>
      );

      const input = container.querySelectorAll('input');
      expect(input).toHaveLength(1);
      fireEvent.change(input[0], { target: { value: 'rizk' } });
      expect(input[0].value).toBe('rizk');
      input[0].focus();

      await waitFor(() => {
        const results = container.querySelectorAll('div.result');
        expect(results.length).toBeGreaterThanOrEqual(1);
        expect(results.length).toBeLessThanOrEqual(3);
      });
    }, 3000);
  });

  describe('Search Page', () => {
    beforeEach(() => {
      window.history.pushState({}, 'Search Page', '/s?s=rizk');
    });

    test('Render', async () => {
      const pageSearchOptions = {
        tabs: true,
        tabsOptions: {
          showAll: 'Show All',
          tabsAlign: 'right',
        },
        sort: [{ field: 'id', type: 'number', name: 'Relative' }],
      };

      const { container } = render(
        <>
          <Search pageSearchOptions={pageSearchOptions}>
            {(item) => (
              <>
                <div className="result" type="operator">
                  {item.title}
                </div>
                <div className="result" type="article">
                  {item.title}
                </div>
              </>
            )}
          </Search>
        </>
      );

      await waitFor(() => {
        const results = container.querySelectorAll('div.result');
        expect(results).toHaveLength(4);
      }, 3000);
    });
  });
});
afterEach(() => {
  cleanup();
});
