/* @vitest-environment jsdom */

import { render } from '@testing-library/react';
import { beforeEach, describe, expect, it, vi } from 'vitest';

import { ImageCanvasReferenceSlot } from './ImageCanvasReferenceSlot';

const useResolvedAssetReadUrlMock = vi.hoisted(() => vi.fn());

vi.mock('../../hooks/useResolvedAssetReadUrl', () => ({
  useResolvedAssetReadUrl: useResolvedAssetReadUrlMock,
}));

describe('ImageCanvasReferenceSlot', () => {
  beforeEach(() => {
    useResolvedAssetReadUrlMock.mockImplementation(
      (source: string | null | undefined, options?: { objectKey?: string | null }) => ({
        resolvedUrl: options?.objectKey
          ? `https://oss.example.com/${options.objectKey}?signature=1`
          : (source ?? ''),
        isResolving: false,
        shouldResolve: Boolean(options?.objectKey),
      }),
    );
  });

  it('resolves private generated reference thumbnails through objectKey', () => {
    const { container } = render(
      <ImageCanvasReferenceSlot
        tone="character"
        icon={<span data-testid="fallback-icon" />}
        imageSrc="/generated-character-drafts/editor/legacy-resources/stale.png"
        objectKey="generated-character-drafts/editor/legacy-resources/editor-resource-1.png"
        label="角色参考"
        ariaLabel="角色参考"
      />,
    );

    const image = container.querySelector('img');

    expect(useResolvedAssetReadUrlMock).toHaveBeenCalledWith(
      '/generated-character-drafts/editor/legacy-resources/stale.png',
      expect.objectContaining({
        objectKey:
          'generated-character-drafts/editor/legacy-resources/editor-resource-1.png',
      }),
    );
    expect(image?.getAttribute('src')).toBe(
      'https://oss.example.com/generated-character-drafts/editor/legacy-resources/editor-resource-1.png?signature=1',
    );
  });
});