import { render } from '@testing-library/react';
import { ThemeProvider } from 'styled-components';
import { Button } from '@/shared/components/ui/Button';
import { lightTheme } from '@/styles/theme';
import { describe, it, expect, vi } from 'vitest';
import '@testing-library/jest-dom';

// Helper to render with theme
const renderWithTheme = (component: React.ReactElement) => {
  return render(
    <ThemeProvider theme={lightTheme}>
      {component}
    </ThemeProvider>
  );
};

describe('Button Component', () => {
  it('renders with children text', () => {
    const { getByText } = renderWithTheme(<Button>Click me</Button>);
    expect(getByText('Click me')).toBeInTheDocument();
  });

  it('calls onClick handler when clicked', () => {
    const handleClick = vi.fn();
    const { getByText } = renderWithTheme(<Button onClick={handleClick}>Click me</Button>);
    
    getByText('Click me').click();
    expect(handleClick).toHaveBeenCalledOnce();
  });

  it('is disabled when disabled prop is true', () => {
    const { getByText } = renderWithTheme(<Button disabled>Click me</Button>);
    const button = getByText('Click me');
    expect(button).toBeDisabled();
  });

  it('does not call onClick when disabled', () => {
    const handleClick = vi.fn();
    const { getByText } = renderWithTheme(
      <Button disabled onClick={handleClick}>
        Click me
      </Button>
    );
    
    getByText('Click me').click();
    expect(handleClick).not.toHaveBeenCalled();
  });

  it('renders with primary variant by default', () => {
    const { container } = renderWithTheme(<Button>Primary</Button>);
    const button = container.firstChild as HTMLElement;
    expect(button).toHaveStyle({ cursor: 'pointer' });
  });

  it('renders with different sizes', () => {
    const { rerender, getByText } = renderWithTheme(
      <Button size="sm">Small</Button>
    );
    expect(getByText('Small')).toBeInTheDocument();
    
    rerender(
      <ThemeProvider theme={lightTheme}>
        <Button size="lg">Large</Button>
      </ThemeProvider>
    );
    expect(getByText('Large')).toBeInTheDocument();
  });

  it('renders full width when fullWidth prop is true', () => {
    const { container } = renderWithTheme(
      <Button fullWidth>Full Width</Button>
    );
    const button = container.firstChild as HTMLElement;
    const styles = window.getComputedStyle(button);
    expect(styles.width).toBe('100%');
  });

  it('shows loading state', () => {
    const { getByText } = renderWithTheme(<Button loading>Loading</Button>);
    const button = getByText('Loading');
    expect(button).toBeDisabled();
  });

  it('renders icon on left side', () => {
    const icon = <span data-testid="icon">🔍</span>;
    const { getByTestId } = renderWithTheme(
      <Button icon={icon} iconPosition="left">
        Search
      </Button>
    );
    expect(getByTestId('icon')).toBeInTheDocument();
  });

  it('renders icon on right side', () => {
    const icon = <span data-testid="icon">→</span>;
    const { getByTestId } = renderWithTheme(
      <Button icon={icon} iconPosition="right">
        Next
      </Button>
    );
    expect(getByTestId('icon')).toBeInTheDocument();
  });
});