import { render, screen, fireEvent } from '@testing-library/react';
import { describe, it, expect, vi } from 'vitest';
import { Slider } from './slider';

describe('Slider Component', () => {
  it('renders slider', () => {
    render(<Slider value={[50]} />);

    const slider = screen.getByRole('slider');
    expect(slider).toBeInTheDocument();
  });

  it('handles value prop', () => {
    render(<Slider value={[25]} />);

    const slider = screen.getByRole('slider') as HTMLInputElement;
    expect(slider.value).toBe('25');
  });

  it('handles controlled value', () => {
    const { rerender } = render(<Slider value={[50]} />);

    let slider = screen.getByRole('slider') as HTMLInputElement;
    expect(slider.value).toBe('50');

    rerender(<Slider value={[75]} />);
    slider = screen.getByRole('slider') as HTMLInputElement;
    expect(slider.value).toBe('75');
  });

  it('calls onValueChange when value changes', () => {
    const handleChange = vi.fn();
    render(<Slider value={[50]} onValueChange={handleChange} />);

    const slider = screen.getByRole('slider');
    fireEvent.change(slider, { target: { value: '75' } });

    expect(handleChange).toHaveBeenCalledWith([75]);
  });

  it('handles min and max values', () => {
    render(<Slider min={0} max={100} value={[50]} />);

    const slider = screen.getByRole('slider');
    expect(slider).toHaveAttribute('min', '0');
    expect(slider).toHaveAttribute('max', '100');
  });

  it('handles disabled state', () => {
    render(<Slider disabled value={[50]} />);

    const slider = screen.getByRole('slider');
    expect(slider).toBeDisabled();
  });

  it('applies custom className', () => {
    const { container } = render(
      <Slider className="custom-slider" value={[50]} />,
    );

    const slider = container.querySelector('.custom-slider');
    expect(slider).toBeInTheDocument();
  });
});