import { cleanup } from '@testing-library/react';
import { render } from '../../utils/theme-render-wrapper';
import { ReactSVG } from 'react-svg';
import { StyledEngineProvider } from '@mui/material/styles';
import { ThemeProvider } from '../@styles/theme-provider';
import type { Theme } from '../@styles/theme-provider';
import { ASSETS_URL } from '../../consts/common';

import { Button } from '.';
import type { ButtonProps } from '.';

declare module '@mui/styles/defaultTheme' {
  // eslint-disable-next-line @typescript-eslint/no-empty-interface
  interface DefaultTheme extends Theme {}
}

const testButton1: ButtonProps = {
  color: 'third',
  startIconUrl: `${ASSETS_URL}/icons/icon_search.svg`
};
const testButton2: ButtonProps = {
  color: 'third',
  endIconUrl: `${ASSETS_URL}/icons/icon_search.svg`
};
const testButton3: ButtonProps = {
  color: 'third',
  size: 'medium',
  active: true
};
const testButton4: ButtonProps = {
  color: 'third',
  size: 'medium',
  changed: true
};
const mockButtonText = 'Test';
const mockIconContent = <ReactSVG src={`${ASSETS_URL}/icons/icon_search.svg`} />;

afterEach(cleanup);

describe('<Button />', () => {
  it('should render button', () => {
    const { baseElement } = render(<Button color="primary" />);
    expect(baseElement).toBeTruthy();
  });

  it(`Should render with start icon`, () => {
    const { queryByTestId } = render(<Button {...testButton1}>{mockButtonText}</Button>);
    expect(queryByTestId('endIconUrl')).toBeNull();
    expect(queryByTestId('startIconUrl')).toBeTruthy();
  });

  it(`Should render with end icon`, () => {
    const { queryByTestId } = render(<Button {...testButton2}>{mockButtonText}</Button>);
    expect(queryByTestId('startIconUrl')).toBeNull();
    expect(queryByTestId('endIconUrl')).toBeTruthy();
  });

  it(`Should be text, active, color - third, size - medium `, () => {
    const { queryByText } = render(
      <StyledEngineProvider injectFirst>
        <ThemeProvider>
          <Button {...testButton3}>{mockButtonText}</Button>
        </ThemeProvider>
      </StyledEngineProvider>
    );
    const text = queryByText(mockButtonText);
    expect(text?.innerHTML).toBe(mockButtonText);
  });

  it(`Should be icon, active, color - third, size - medium `, () => {
    const { container } = render(<Button {...testButton3}>{mockIconContent}</Button>);
    const svgEl = container.getElementsByTagName('svg');
    expect(svgEl).toBeTruthy();
  });

  it(`Should be icon, changed, color - third, size - medium `, () => {
    const { container } = render(<Button {...testButton4}>{mockIconContent}</Button>);
    const svgEl = container.getElementsByTagName('svg');
    expect(svgEl).toBeTruthy();
  });
});