import { describe, it, expect } from 'vitest';
import { render } from '@testing-library/react';
import { createStore, Provider } from 'jotai';
import React from 'react';
import Graph from 'graphology';
import { Minimap } from '../../components/Minimap';
import type { GraphNodeAttributes, GraphEdgeAttributes, DBGraphNode } from '../../core/types';
import { graphAtom, graphOptions, currentGraphIdAtom } from '../../core/graph-store';
import { addNodeToLocalGraphAtom } from '../../core/graph-mutations';

function makeDbNode(id: string, x = 0, y = 0): DBGraphNode {
	return {
		id,
		graph_id: 'test-graph',
		label: `Node ${id}`,
		node_type: 'default',
		configuration: null,
		ui_properties: { x, y, width: 200, height: 100, size: 15, zIndex: 0 },
		data: null,
		created_at: '2024-01-01T00:00:00Z',
		updated_at: '2024-01-01T00:00:00Z',
	};
}

function setupStore() {
	const store = createStore();
	store.set(graphAtom, new Graph<GraphNodeAttributes, GraphEdgeAttributes>(graphOptions));
	store.set(currentGraphIdAtom, 'test-graph');
	return store;
}

function renderWithStore(store: ReturnType<typeof createStore>, ui: React.ReactElement) {
	return render(<Provider store={store}>{ui}</Provider>);
}

describe('Minimap', () => {
	it('renders a canvas element', () => {
		const store = setupStore();
		const { container } = renderWithStore(store, <Minimap />);

		const canvas = container.querySelector('canvas');
		expect(canvas).toBeInTheDocument();
	});

	it('applies default dimensions', () => {
		const store = setupStore();
		const { container } = renderWithStore(store, <Minimap />);

		const canvas = container.querySelector('canvas') as HTMLCanvasElement;
		expect(canvas.style.width).toBe('200px');
		expect(canvas.style.height).toBe('150px');
	});

	it('accepts custom dimensions', () => {
		const store = setupStore();
		const { container } = renderWithStore(store, <Minimap width={300} height={200} />);

		const canvas = container.querySelector('canvas') as HTMLCanvasElement;
		expect(canvas.style.width).toBe('300px');
		expect(canvas.style.height).toBe('200px');
	});

	it('positions bottom-right by default', () => {
		const store = setupStore();
		const { container } = renderWithStore(store, <Minimap />);

		const canvas = container.querySelector('canvas') as HTMLCanvasElement;
		expect(canvas.style.position).toBe('absolute');
		expect(canvas.style.bottom).toBe('12px');
		expect(canvas.style.right).toBe('12px');
	});

	it('positions top-left when specified', () => {
		const store = setupStore();
		const { container } = renderWithStore(
			store,
			<Minimap position="top-left" offset={20} />,
		);

		const canvas = container.querySelector('canvas') as HTMLCanvasElement;
		expect(canvas.style.top).toBe('20px');
		expect(canvas.style.left).toBe('20px');
	});

	it('applies custom className', () => {
		const store = setupStore();
		const { container } = renderWithStore(
			store,
			<Minimap className="my-minimap" />,
		);

		const canvas = container.querySelector('canvas.my-minimap');
		expect(canvas).toBeInTheDocument();
	});

	it('has pointer cursor for interaction', () => {
		const store = setupStore();
		const { container } = renderWithStore(store, <Minimap />);

		const canvas = container.querySelector('canvas') as HTMLCanvasElement;
		expect(canvas.style.cursor).toBe('pointer');
	});

	it('has touch-action none for gesture handling', () => {
		const store = setupStore();
		const { container } = renderWithStore(store, <Minimap />);

		const canvas = container.querySelector('canvas') as HTMLCanvasElement;
		expect(canvas.style.touchAction).toBe('none');
	});
});
