import React from 'react';
import { fireEvent, screen } from '@testing-library/react';
import { renderInAppContext } from '@theorchard/suite-testing';
import { SearchField, SearchFieldPropTypes } from '../search-field';

describe('<SearchField/>', () => {
    const defaultProps = {
        onHandleChange: jest.fn(),
        placeholder: 'Search for label...',
        searchClassName: 'SearchField',
        searchInputName: 'SearchField',
        clearSearchField: false,
        states: {},
        setStates: jest.fn(),
    };

    const render = (props: SearchFieldPropTypes) =>
        renderInAppContext(<SearchField {...props} />);

    it('renders input and displays Search icon', () => {
        render(defaultProps);
        expect(screen.getByTestId('SearchGlyphIcon')).toBeDefined();
        expect(
            screen.getByPlaceholderText('Search for label...')
        ).toBeDefined();
    });

    it('renders when input changes', () => {
        render(defaultProps);
        const input = screen.getByTestId('searchFieldInput');
        fireEvent.change(input, { target: { value: '123' } });
        expect(input).toHaveDisplayValue('123');
        expect(screen.getByTestId('CloseGlyphIcon')).toBeDefined();
    });

    it('on click of cancel icon, clear input value', () => {
        render(defaultProps);
        const input = screen.getByTestId('searchFieldInput');
        fireEvent.change(input, { target: { value: '123' } });
        expect(input).toHaveDisplayValue('123');

        const cancelIcon = screen.getByTestId('CloseGlyphIcon');
        fireEvent.click(cancelIcon);
        expect(input).toHaveDisplayValue('');
    });

    it('when an input accept only numbers', () => {
        render({ ...defaultProps, validatePattern: /^[0-9\b]+$/ });

        const input = screen.getByTestId('searchFieldInput');
        fireEvent.change(input, { target: { value: 'Test' } });
        expect(input).toHaveDisplayValue('');
    });

    it('renders input with searched term', () => {
        render({ ...defaultProps, value: '2012 Music' });
        const input = screen.getByTestId('searchFieldInput');
        expect(input).toHaveDisplayValue('2012 Music');
    });

    it('disables input if isDisabled is true', () => {
        render({ ...defaultProps, isDisabled: true });
        const searchInput = screen.getByTestId('searchFieldInput');
        expect(searchInput).toHaveAttribute('disabled');
    });
});