import { useState } from 'react';
import { cleanup, fireEvent } from '@testing-library/react';
import { render } from '../../utils/theme-render-wrapper';
import { ClientImage } from './client-image';

afterEach(cleanup);

const listItems = [
  {
    default: true,
    name: 'p81',
    content: {
      src: 'https://www.perimeter81.com/app/themes/perimeter81/resources/assets/images/favicon81.ico',
      title: 'Perimeter 81',
      subtitle: 'Partner'
    }
  },
  {
    name: 'ini',
    content: {
      src: '',
      title: 'Ini',
      subtitle: 'Partner'
    }
  },
  {
    name: 'mini',
    content: {
      title: 'Mini',
      subtitle: 'Client'
    }
  },
  {
    name: 'miny',
    content: {
      title: 'Miny'
    }
  },
  { name: 'mo', content: {} }
];

describe('<ClientImage />', () => {
  it(`Should render successfully`, () => {
    const Wrapper = () => {
      const [selectValue, setSelectValue] = useState('');
      return (
        <ClientImage
          value={selectValue}
          menuContentProps={{
            listItems,
            handleClick: name => () => setSelectValue(name.toString())
          }}
        />
      );
    };

    const { queryByTestId, queryByText } = render(<Wrapper />);

    const selectEl = queryByTestId('select');
    selectEl?.click();

    const itemEl = queryByText(listItems[0].name);
    itemEl?.click();
  });

  it(`Should render a disabled select`, () => {
    const Wrapper = () => {
      const [selectValue, setSelectValue] = useState('');

      return (
        <ClientImage
          disabled
          value={selectValue}
          menuContentProps={{
            search: true,
            handleClick: name => () => setSelectValue(name.toString()),
            listItems
          }}
        />
      );
    };

    render(<Wrapper />);
  });

  it(`Should activate callback function`, () => {
    const handleSelectClickCB = jest.fn();

    const { queryByTestId } = render(
      <ClientImage
        value={listItems[1].name}
        handleSelectClickCB={handleSelectClickCB}
        menuContentProps={{
          handleClick: () => jest.fn(),
          listItems
        }}
      />
    );

    const selectEl = queryByTestId('select');
    selectEl?.click();

    expect(handleSelectClickCB).toHaveBeenCalled();
  });

  it(`Should open dropdown and activate search`, () => {
    const handleSelectClickCB = jest.fn();

    const { queryByTestId, queryByText } = render(
      <ClientImage
        handleSelectClickCB={handleSelectClickCB}
        menuContentProps={{
          searchDebounceTime: -1, // disables debounce
          handleClick: () => jest.fn(),
          listItems
        }}
      />
    );

    const selectEl = queryByTestId('select');
    selectEl?.click();

    const inputEl = queryByTestId('searchField');
    expect(inputEl).toBeTruthy();
    if (inputEl) {
      fireEvent.change(inputEl, { target: { value: 'i' } });
      fireEvent.keyDown(inputEl, { key: 'Backspace' });
    }

    const itemEl = queryByText('Client');
    itemEl?.click();

    expect(handleSelectClickCB).toHaveBeenCalled();
  });
});