import React from 'react';
import { Button, AnchorButton } from './index';
import { fireEvent } from '@testing-library/react';
import { renderWithTheme } from '@lendi-ui/test-utils';
import Add from '@lendi-ui/icon/Add';

describe('Button (Next)', () => {
  it(`it should render successfully`, () => {
    const screen = renderWithTheme(<Button variant="primary">Click me!</Button>);

    const button = screen.getByRole('button', {
      name: /click me/i,
    });

    expect(button).toBeInTheDocument();
  });

  it(`it should have data-testid attribute`, () => {
    const screen = renderWithTheme(
      <Button variant="primary" data-testid="testing">
        Click me!
      </Button>
    );

    const buttonTestID = screen.getByTestId('testing');

    expect(buttonTestID).toBeInTheDocument();
  });

  it(`it should render with aria-label if provided`, () => {
    const screen = renderWithTheme(
      <Button variant="primary" ariaLabel="No click me!">
        Click me!
      </Button>
    );

    const button = screen.getByRole('button', {
      name: /no click me/i,
    });

    expect(button).toBeInTheDocument();
    expect(button).toHaveAttribute('aria-label');
  });

  it(`it should render with aria-expanded if provided`, () => {
    const screen = renderWithTheme(
      <Button variant="primary" ariaExpanded={true}>
        Click me!
      </Button>
    );

    const button = screen.getByRole('button', {
      name: /click me/i,
    });

    expect(button).toBeInTheDocument();
    expect(button).toHaveAttribute('aria-expanded');
  });

  it(`it should render icon with aria-label`, () => {
    const screen = renderWithTheme(<Button variant="primary" ariaLabel="Add" icon={{ component: Add }} />);

    const button = screen.getByRole('button', {
      name: /Add/i,
    });

    expect(button).toBeInTheDocument();
    expect(button).toHaveAttribute('aria-label');
  });

  it(`it should call 'onClick' function`, () => {
    const mockOnClick = jest.fn();

    const screen = renderWithTheme(
      <Button variant="primary" onClick={mockOnClick}>
        Click me!
      </Button>
    );

    fireEvent.click(screen.getByText('Click me!'));

    expect(mockOnClick).toBeCalled();
  });

  it(`it should call 'onPress' (deprecated) function`, () => {
    const mockOnClick = jest.fn();

    const screen = renderWithTheme(
      <Button variant="primary" onPress={mockOnClick}>
        Click me!
      </Button>
    );

    fireEvent.click(screen.getByText('Click me!'));

    expect(mockOnClick).toBeCalled();
  });

  it(`it should call 'onClick' not 'onPress' when both passed`, () => {
    const mockOnClick = jest.fn();
    const mockOnClick2 = jest.fn();

    const screen = renderWithTheme(
      <Button variant="primary" onClick={mockOnClick} onPress={mockOnClick2}>
        Click me!
      </Button>
    );

    fireEvent.click(screen.getByText('Click me!'));

    expect(mockOnClick).toBeCalled();
    expect(mockOnClick2).not.toBeCalled();
  });

  it(`it should have disabled attribute when isDisabled is true`, () => {
    const mockOnClick = jest.fn();

    const screen = renderWithTheme(
      <Button variant="primary" onClick={mockOnClick} isDisabled>
        Click me!
      </Button>
    );

    const button = screen.getByText('Click me!');

    screen.debug(button);

    expect(button.closest('button')).toHaveAttribute('disabled');
  });

  it(`it should render a different button type when provided`, () => {
    const mockOnClick = jest.fn();

    const screen = renderWithTheme(
      <Button variant="primary" onClick={mockOnClick} type="submit">
        submit
      </Button>
    );

    const button = screen.getByRole('button', {
      name: /submit/i,
    });

    expect(button.getAttribute('type')).toEqual('submit');
  });

  it(`it should NOT call 'onClick' function for disabled button`, () => {
    const mockOnClick = jest.fn();

    const screen = renderWithTheme(
      <Button variant="primary" isDisabled onPress={mockOnClick}>
        Click me!
      </Button>
    );

    fireEvent.click(screen.getByText('Click me!'));

    expect(mockOnClick).not.toBeCalled();
  });

  it(`it should have loading text when isLoading is true`, () => {
    const mockOnClick = jest.fn();

    const screen = renderWithTheme(
      <Button variant="primary" onClick={mockOnClick} isLoading>
        Click me!
      </Button>
    );

    const loadingButton = screen.getByRole('button', {
      name: /loading/i,
    });
    const childrenButton = screen.queryByText(/click me/i);

    expect(loadingButton).toBeInTheDocument();

    // Why check if visible here because we use css visibility: hidden to maintain button shape
    // 1.
    // that css prop allows us to hide elements but keep occupying the physical space
    // this means our button does not shrink to a small button with a spinner
    //
    // 2.
    // that css prop also means out text will no longer be screen reader accessible, allowing our
    // loading text to take over
    expect(childrenButton).not.toBeVisible();
  });
});

describe('AnchorButton (Next)', () => {
  it(`it should render successfully`, () => {
    const screen = renderWithTheme(
      <AnchorButton href="/" variant="primary">
        Click me!
      </AnchorButton>
    );

    const link = screen.getByRole('link', {
      name: /click me/i,
    });

    expect(link).toBeInTheDocument();
    expect(link).toHaveAttribute('href');
  });

  it(`it should render target when provided`, () => {
    const screen = renderWithTheme(
      <AnchorButton href="/" target="_blank" variant="primary">
        Click me!
      </AnchorButton>
    );

    const link = screen.getByRole('link', {
      name: /click me/i,
    });

    expect(link).toBeInTheDocument();
    expect(link).toHaveAttribute('target');
    expect(link).toHaveAttribute('rel');
  });

  it(`it should have data-testid attribute`, () => {
    const screen = renderWithTheme(
      <AnchorButton href="/" variant="primary" data-testid="testing">
        Click me!
      </AnchorButton>
    );

    const linkTestID = screen.getByTestId('testing');

    expect(linkTestID).toBeInTheDocument();
  });
});