/* @vitest-environment jsdom */

import { fireEvent, render, screen } from '@testing-library/react';
import { Check } from 'lucide-react';
import { expect, test, vi } from 'vitest';

import {
  EditorIconButton,
  SidebarMediaItem,
} from './ImageCanvasEditorPrimitives';

test('editor icon button delegates accessible icon chrome to the platform primitive', () => {
  render(
    <EditorIconButton
      label="素材选择模式"
      title="选择"
      icon={Check}
      className="image-canvas-editor__icon-button"
      pressed
      expanded
    />,
  );

  const button = screen.getByRole('button', { name: '素材选择模式' });

  expect(button.className).toContain('platform-icon-button');
  expect(button.className).toContain('image-canvas-editor__icon-button');
  expect(button.getAttribute('title')).toBe('选择');
  expect(button.getAttribute('aria-pressed')).toBe('true');
  expect(button.getAttribute('aria-expanded')).toBe('true');
});

test('editor icon button forwards shared icon button variants', () => {
  render(
    <EditorIconButton
      label="关闭生成图片"
      title="关闭"
      icon={Check}
      variant="surfaceFloating"
      className="image-canvas-editor__generation-close"
    />,
  );

  const button = screen.getByRole('button', { name: '关闭生成图片' });

  expect(button.className).toContain('bg-white/94');
  expect(button.className).toContain('image-canvas-editor__generation-close');
});

test('sidebar media item delegates thumbnail chrome to the platform media frame', () => {
  const onPrimaryClick = vi.fn();
  render(
    <SidebarMediaItem
      title="拼图素材"
      detail="1024 x 1024"
      imageSrc="data:image/png;base64,one"
      imageAlt="素材：拼图素材"
      primaryLabel="添加拼图素材"
      onPrimaryClick={onPrimaryClick}
      rowClassName="image-canvas-editor__asset-row"
      primaryClassName="image-canvas-editor__asset-button"
      thumbnailClassName="image-canvas-editor__asset-thumb"
      metaClassName="image-canvas-editor__asset-meta"
    />,
  );

  const button = screen.getByRole('button', { name: '添加拼图素材' });
  const image = screen.getByRole('img', { name: '素材：拼图素材' });
  const frame = image.closest('.platform-media-frame');

  expect(frame?.className).toContain('platform-media-frame');
  expect(frame?.className).toContain('image-canvas-editor__asset-thumb');
  expect(screen.getByText('1024 x 1024')).toBeTruthy();

  fireEvent.click(button);

  expect(onPrimaryClick).toHaveBeenCalledTimes(1);
});