import { describe, it, expect, beforeEach } from 'vitest';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import ZoomControls from './ZoomControls';
import { useDesignStore } from '../store/designStore';

describe('ZoomControls', () => {
  beforeEach(() => {
    useDesignStore.setState({ zoom: 1.0 });
  });

  it('displays current zoom percentage', () => {
    render(<ZoomControls />);
    expect(screen.getByText('100%')).toBeInTheDocument();
  });

  it('increases zoom on + click', async () => {
    const user = userEvent.setup();
    render(<ZoomControls />);
    await user.click(screen.getByLabelText('Yakınlaştır'));
    expect(useDesignStore.getState().zoom).toBeCloseTo(1.1);
    expect(screen.getByText('110%')).toBeInTheDocument();
  });

  it('decreases zoom on − click', async () => {
    const user = userEvent.setup();
    render(<ZoomControls />);
    await user.click(screen.getByLabelText('Uzaklaştır'));
    expect(useDesignStore.getState().zoom).toBeCloseTo(0.9);
    expect(screen.getByText('90%')).toBeInTheDocument();
  });

  it('does not exceed max zoom (2.0)', async () => {
    useDesignStore.setState({ zoom: 2.0 });
    const user = userEvent.setup();
    render(<ZoomControls />);
    await user.click(screen.getByLabelText('Yakınlaştır'));
    expect(useDesignStore.getState().zoom).toBe(2.0);
  });

  it('does not go below min zoom (0.5)', async () => {
    useDesignStore.setState({ zoom: 0.5 });
    const user = userEvent.setup();
    render(<ZoomControls />);
    await user.click(screen.getByLabelText('Uzaklaştır'));
    expect(useDesignStore.getState().zoom).toBe(0.5);
  });
});
