/* eslint-env jest */
import { act } from 'react';
import { createRoot, type Root } from 'react-dom/client';

import { ImageField } from '../fields';

const size = {
  current: { width: 801, height: 801 } as {
    width: number;
    height: number;
  } | null,
};

jest.mock('../../hooks/use-seo-meta', () => ({
  useAttachmentUrl: () => 'https://shop.example/image.jpg',
  useAttachmentSize: () => size.current,
}));

(
  globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }
).IS_REACT_ACT_ENVIRONMENT = true;

let root: Root;
let host: HTMLDivElement;

beforeEach(() => {
  host = document.createElement('div');
  document.body.appendChild(host);
  root = createRoot(host);
});

afterEach(() => {
  act(() => root.unmount());
  host.remove();
});

const field = (minSize?: { width: number; height: number }): JSX.Element => (
  <ImageField
    label="Social image"
    imageId={5}
    imageUrl=""
    onChange={() => undefined}
    minSize={minSize}
  />
);

describe('ImageField', () => {
  it('says when the image is smaller than a large card wants', () => {
    act(() => root.render(field({ width: 1200, height: 630 })));
    expect(host.textContent).toContain('801 × 801 px: under 1200 × 630');
  });

  it('says nothing for a large enough image, or without a minimum', () => {
    size.current = { width: 1600, height: 900 };
    act(() => root.render(field({ width: 1200, height: 630 })));
    expect(host.textContent).not.toContain('under 1200');
    size.current = { width: 801, height: 801 };
    act(() => root.render(field()));
    expect(host.textContent).not.toContain('under');
  });
});