import { expect } from '@playwright/test'
import { Editor } from 'tldraw'
import test from '../fixtures/fixtures'
import { getAllShapeTypes, setupOrReset } from '../shared-e2e'

declare const editor: Editor

const clickableShapeCreators = [
	{ tool: 'draw', shape: 'draw' },
	{ tool: 'frame', shape: 'frame' },
	{ tool: 'note', shape: 'note' },
	{ tool: 'text', shape: 'text' },
	{ tool: 'rectangle', shape: 'geo' },
	{ tool: 'ellipse', shape: 'geo' },
	{ tool: 'triangle', shape: 'geo' },
	{ tool: 'diamond', shape: 'geo' },
	{ tool: 'cloud', shape: 'geo' },
	{ tool: 'hexagon', shape: 'geo' },
	// { tool: 'octagon', shape: 'geo' },
	{ tool: 'star', shape: 'geo' },
	{ tool: 'heart', shape: 'geo' },
	{ tool: 'rhombus', shape: 'geo' },
	{ tool: 'oval', shape: 'geo' },
	// { tool: 'trapezoid', shape: 'geo' },
	{ tool: 'arrow-right', shape: 'geo' },
	{ tool: 'arrow-left', shape: 'geo' },
	{ tool: 'arrow-up', shape: 'geo' },
	{ tool: 'arrow-down', shape: 'geo' },
	{ tool: 'x-box', shape: 'geo' },
	{ tool: 'check-box', shape: 'geo' },
]

const draggableShapeCreators = [
	{ tool: 'draw', shape: 'draw' },
	{ tool: 'arrow', shape: 'arrow' },
	{ tool: 'frame', shape: 'frame' },
	{ tool: 'note', shape: 'note' },
	{ tool: 'text', shape: 'text' },
	{ tool: 'line', shape: 'line' },
	{ tool: 'rectangle', shape: 'geo' },
	{ tool: 'ellipse', shape: 'geo' },
	{ tool: 'triangle', shape: 'geo' },
	{ tool: 'diamond', shape: 'geo' },
	{ tool: 'cloud', shape: 'geo' },
	{ tool: 'hexagon', shape: 'geo' },
	// { tool: 'octagon', shape: 'geo' },
	{ tool: 'star', shape: 'geo' },
	{ tool: 'rhombus', shape: 'geo' },
	{ tool: 'oval', shape: 'geo' },
	{ tool: 'heart', shape: 'geo' },
	// { tool: 'trapezoid', shape: 'geo' },
	{ tool: 'arrow-right', shape: 'geo' },
	{ tool: 'arrow-left', shape: 'geo' },
	{ tool: 'arrow-up', shape: 'geo' },
	{ tool: 'arrow-down', shape: 'geo' },
	{ tool: 'x-box', shape: 'geo' },
	{ tool: 'check-box', shape: 'geo' },
]

const otherTools = [{ tool: 'select' }, { tool: 'eraser' }, { tool: 'laser' }]

test.describe('Shape Tools', () => {
	test.beforeEach(setupOrReset)

	test('creates shapes with other tools', async ({ toolbar, page }) => {
		expect(await getAllShapeTypes(page)).toEqual([])

		for (const { tool } of otherTools) {
			// Find and click the button
			if (!(await page.getByTestId(`tools.${tool}`).isVisible())) {
				if (!(await toolbar.moreToolsButton.isVisible())) {
					throw Error(`Tool more is not visible`)
				}
				await toolbar.moreToolsButton.click()

				if (!(await page.getByTestId(`tools.more.${tool}`).isVisible())) {
					throw Error(`Tool in more panel is not visible`)
				}
				await page.getByTestId(`tools.more.${tool}`).click()

				await toolbar.moreToolsButton.click()
			}

			if (!(await page.getByTestId(`tools.${tool}`).isVisible())) {
				throw Error(`Tool ${tool} is not visible`)
			}

			await page.getByTestId(`tools.${tool}`).click()

			// Button should be selected
			await expect(page.getByTestId(`tools.${tool}`)).toHaveAttribute('aria-pressed', 'true')
		}
	})

	test('creates shapes clickable tools', async ({ page, toolbar }) => {
		expect(await getAllShapeTypes(page)).toEqual([])

		for (const { tool, shape } of clickableShapeCreators) {
			// Find and click the button
			if (!(await page.getByTestId(`tools.${tool}`).isVisible())) {
				await toolbar.moreToolsButton.click()
				await page.getByTestId(`tools.more.${tool}`).click()
				await toolbar.moreToolsButton.click()
			}
			await page.getByTestId(`tools.${tool}`).click()

			// Button should be selected
			await expect(page.getByTestId(`tools.${tool}`)).toHaveAttribute('aria-pressed', 'true')

			// Click on the page
			await page.mouse.click(200, 200)

			// We should have a corresponding shape in the page
			expect(await getAllShapeTypes(page)).toEqual([shape])

			// Reset for next time using API (faster than keyboard)
			await page.evaluate(() => {
				editor.selectAll().deleteShapes(editor.getSelectedShapeIds())
				editor.setCurrentTool('select')
			})
		}

		expect(await getAllShapeTypes(page)).toEqual([])
	})

	test('creates shapes with draggable tools', async ({ page, toolbar }) => {
		expect(await getAllShapeTypes(page)).toEqual([])

		for (const { tool, shape } of draggableShapeCreators) {
			// Find and click the button
			if (!(await page.getByTestId(`tools.${tool}`).isVisible())) {
				await toolbar.moreToolsButton.click()
				await page.getByTestId(`tools.more.${tool}`).click()
				await toolbar.moreToolsButton.click()
			}

			await page.getByTestId(`tools.${tool}`).click()

			// Button should be selected
			await expect(page.getByTestId(`tools.${tool}`)).toHaveAttribute('aria-pressed', 'true')

			// Click and drag
			await page.mouse.move(200, 200)
			await page.mouse.down()
			await page.mouse.move(250, 250)
			await page.mouse.up()

			// We should have a corresponding shape in the page
			expect(await getAllShapeTypes(page)).toEqual([shape])

			// Reset for next time using API (faster than keyboard)
			await page.evaluate(() => {
				editor.selectAll().deleteShapes(editor.getSelectedShapeIds())
				editor.setCurrentTool('select')
			})
		}
	})
})