/** @vitest-environment jsdom */
import { afterEach, describe, expect, it } from 'vitest';
import { cleanup, fireEvent, render, screen } from '@testing-library/react';
import { ResultComparison } from './ResultComparison';
import { resultComparisonEn, resultComparisonIt } from '../i18n/resultComparison';

const photo = 'data:image/png;base64,PHOTO';
const result = 'data:image/png;base64,RESULT';
const garment = 'data:image/png;base64,GARMENT';
afterEach(cleanup);

describe.each([['EN', resultComparisonEn], ['IT', resultComparisonIt]] as const)('%s result comparison', (_locale, t) => {
  const props = { resultImage: result, originalPhotoImage: photo, originalClothingImage: garment, t };

  it('labels the distinct private images and starts halfway with a native range', () => {
    const { container } = render(<ResultComparison {...props} />);
    expect(screen.getByRole('img', { name: t.beforePhoto }).getAttribute('src')).toBe(photo);
    expect(screen.getByRole('img', { name: t.afterTryOn }).getAttribute('src')).toBe(result);
    const slider = screen.getByRole('slider', { name: t.beforeAfterSlider });
    expect(slider.getAttribute('type')).toBe('range');
    expect(slider.getAttribute('min')).toBe('0');
    expect(slider.getAttribute('max')).toBe('100');
    expect(slider).toHaveProperty('value', '50');
    expect(container.querySelectorAll('img.ph-no-capture')).toHaveLength(2);
    for (const label of [t.before, t.after]) expect(screen.getByText(label).getAttribute('aria-hidden')).toBe('true');
  });

  it('moves the split to both endpoints and preserves it through the garment toggle', () => {
    const { container } = render(<ResultComparison {...props} />);
    const slider = screen.getByRole('slider');
    for (const value of ['0', '100', '73']) {
      fireEvent.change(slider, { target: { value } });
      expect(container.querySelector<HTMLElement>('.aisthetix-before-after')?.style.getPropertyValue('--aisthetix-split')).toBe(`${value}%`);
    }
    fireEvent.click(screen.getByRole('button', { name: t.toggleCompare }));
    expect(screen.queryByRole('slider')).toBeNull();
    expect(screen.getByRole('img', { name: t.compareOriginal }).getAttribute('src')).toBe(garment);
    expect(screen.getByRole('img', { name: t.compareTryOn }).getAttribute('src')).toBe(result);
    expect(screen.getByRole('button', { name: t.toggleCompare }).classList.contains('active')).toBe(true);
    fireEvent.click(screen.getByRole('button', { name: t.toggleResult }));
    expect(screen.getByRole('slider')).toHaveProperty('value', '73');
    expect(screen.getByRole('button', { name: t.toggleResult }).classList.contains('active')).toBe(true);
  });

  it('supports an initial garment comparison', () => {
    render(<ResultComparison {...props} initialViewMode="compare" />);
    expect(screen.queryByRole('slider')).toBeNull();
    expect(screen.getByRole('img', { name: t.compareOriginal }).getAttribute('src')).toBe(garment);
  });

  it('keeps garment comparison available without a shopper photo', () => {
    render(<ResultComparison {...props} originalPhotoImage={undefined} />);
    expect(screen.queryByRole('slider')).toBeNull();
    expect(screen.getByRole('img', { name: t.toggleResult }).getAttribute('src')).toBe(result);
    fireEvent.click(screen.getByRole('button', { name: t.toggleCompare }));
    expect(screen.getByRole('img', { name: t.compareOriginal }).getAttribute('src')).toBe(garment);
  });

  it.each([photo, undefined])('falls back from compare without a garment, shopper photo=%s', originalPhotoImage => {
    render(<ResultComparison {...props} originalPhotoImage={originalPhotoImage} originalClothingImage={undefined} initialViewMode="compare" />);
    expect(screen.queryByRole('button')).toBeNull();
    expect(Boolean(screen.queryByRole('slider'))).toBe(Boolean(originalPhotoImage));
    expect(screen.getByRole('img', { name: originalPhotoImage ? t.afterTryOn : t.toggleResult }).getAttribute('src')).toBe(result);
  });

  it('falls back if the garment disappears while comparing', () => {
    const { rerender } = render(<ResultComparison {...props} initialViewMode="compare" />);
    rerender(<ResultComparison {...props} originalClothingImage={undefined} />);
    expect(screen.queryByRole('button')).toBeNull();
    expect(screen.getByRole('slider')).toHaveProperty('value', '50');
  });
});