/* @vitest-environment jsdom */

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

import type { CanvasLayer } from './ImageCanvasEditorTypes';
import { ImageCanvasSelectedLayerToolbarView } from './ImageCanvasSelectedLayerToolbarView';

function createLayer(overrides: Partial<CanvasLayer> = {}): CanvasLayer {
  return {
    id: 'layer-1',
    resourceId: 'resource-1',
    title: '生成主图',
    src: 'data:image/png;base64,layer',
    x: 0,
    y: 0,
    width: 320,
    height: 240,
    originalWidth: 320,
    originalHeight: 240,
    zIndex: 1,
    sourceType: 'uploaded',
    ...overrides,
  };
}

function renderSelectedToolbar(
  overrides: Partial<Parameters<typeof ImageCanvasSelectedLayerToolbarView>[0]> = {},
) {
  const props: Parameters<typeof ImageCanvasSelectedLayerToolbarView>[0] = {
    selectedLayer: createLayer(),
    selectedToolbarStyle: { left: 12, top: 24 },
    onDeleteSelectedLayer: vi.fn(),
    onOpenQuickEditPanel: vi.fn(),
    onOpenEditDialog: vi.fn(),
    onOpenCharacterAnimationPanel: vi.fn(),
    onOpenLayerMetadata: vi.fn(),
    ...overrides,
  };

  render(<ImageCanvasSelectedLayerToolbarView {...props} />);

  return props;
}

describe('ImageCanvasSelectedLayerToolbarView', () => {
  it('renders common layer actions and forwards callbacks', () => {
    const props = renderSelectedToolbar();
    const toolbar = screen.getByRole('toolbar', { name: '图片工具栏' });

    fireEvent.click(within(toolbar).getByRole('button', { name: '删除图片' }));
    fireEvent.click(within(toolbar).getByRole('button', { name: '快速编辑' }));

    expect(props.onDeleteSelectedLayer).toHaveBeenCalledTimes(1);
    expect(props.onOpenQuickEditPanel).toHaveBeenCalledWith(props.selectedLayer);
  });

  it('renders generated and character actions only when applicable', () => {
    const layer = createLayer({
      sourceType: 'generated',
      assetKind: 'character',
    });
    const props = renderSelectedToolbar({ selectedLayer: layer });

    fireEvent.click(screen.getByRole('button', { name: '修改图片' }));
    fireEvent.click(screen.getByRole('button', { name: '生成动画' }));
    fireEvent.click(
      screen.getByRole('button', { name: `查看${layer.title}图片信息` }),
    );

    expect(props.onOpenEditDialog).toHaveBeenCalledWith(layer);
    expect(props.onOpenCharacterAnimationPanel).toHaveBeenCalledWith(layer);
    expect(props.onOpenLayerMetadata).toHaveBeenCalledWith(layer);
  });

  it('renders nothing without a selected layer or toolbar position', () => {
    const { rerender } = render(
      <ImageCanvasSelectedLayerToolbarView
        selectedLayer={null}
        selectedToolbarStyle={{ left: 0, top: 0 }}
        onDeleteSelectedLayer={vi.fn()}
        onOpenQuickEditPanel={vi.fn()}
        onOpenEditDialog={vi.fn()}
        onOpenCharacterAnimationPanel={vi.fn()}
        onOpenLayerMetadata={vi.fn()}
      />,
    );

    expect(screen.queryByRole('toolbar', { name: '图片工具栏' })).toBeNull();

    rerender(
      <ImageCanvasSelectedLayerToolbarView
        selectedLayer={createLayer()}
        selectedToolbarStyle={null}
        onDeleteSelectedLayer={vi.fn()}
        onOpenQuickEditPanel={vi.fn()}
        onOpenEditDialog={vi.fn()}
        onOpenCharacterAnimationPanel={vi.fn()}
        onOpenLayerMetadata={vi.fn()}
      />,
    );

    expect(screen.queryByRole('toolbar', { name: '图片工具栏' })).toBeNull();
  });
});