import { __, _x } from '@wordpress/i18n'
import { getKeyMap } from 'codemirror/src/input/keymap'
import React, { Fragment, useMemo } from 'react'
import { useSnippetForm } from '../WithSnippetFormContext'
import { isMacOS } from '../../../../utils/screen'
import type { KeyMap } from 'codemirror'

const KEYBOARD_KEYS = {
	'Fn': _x('Fn', 'keyboard key', 'code-snippets'),
	'Cmd': _x('Ctrl', 'keyboard key', 'code-snippets'),
	'Ctrl': _x('Ctrl', 'keyboard key', 'code-snippets'),
	'Shift': _x('Shift', 'keyboard key', 'code-snippets'),
	'Alt': _x('Alt', 'keyboard key', 'code-snippets'),
	'Tab': _x('Tab', 'keyboard key', 'code-snippets'),
	'Up': _x('Up', 'keyboard key', 'code-snippets'),
	'Down': _x('Down', 'keyboard key', 'code-snippets'),
	'Left': _x('Left', 'keyboard key', 'code-snippets'),
	'Right': _x('Right', 'keyboard key', 'code-snippets'),
	'A': _x('A', 'keyboard key', 'code-snippets'),
	'B': _x('B', 'keyboard key', 'code-snippets'),
	'C': _x('C', 'keyboard key', 'code-snippets'),
	'D': _x('D', 'keyboard key', 'code-snippets'),
	'E': _x('E', 'keyboard key', 'code-snippets'),
	'F': _x('F', 'keyboard key', 'code-snippets'),
	'G': _x('G', 'keyboard key', 'code-snippets'),
	'H': _x('H', 'keyboard key', 'code-snippets'),
	'I': _x('I', 'keyboard key', 'code-snippets'),
	'J': _x('J', 'keyboard key', 'code-snippets'),
	'K': _x('K', 'keyboard key', 'code-snippets'),
	'L': _x('L', 'keyboard key', 'code-snippets'),
	'M': _x('M', 'keyboard key', 'code-snippets'),
	'N': _x('N', 'keyboard key', 'code-snippets'),
	'O': _x('O', 'keyboard key', 'code-snippets'),
	'P': _x('P', 'keyboard key', 'code-snippets'),
	'Q': _x('Q', 'keyboard key', 'code-snippets'),
	'R': _x('R', 'keyboard key', 'code-snippets'),
	'S': _x('S', 'keyboard key', 'code-snippets'),
	'T': _x('T', 'keyboard key', 'code-snippets'),
	'U': _x('U', 'keyboard key', 'code-snippets'),
	'V': _x('V', 'keyboard key', 'code-snippets'),
	'W': _x('W', 'keyboard key', 'code-snippets'),
	'X': _x('X', 'keyboard key', 'code-snippets'),
	'Y': _x('Y', 'keyboard key', 'code-snippets'),
	'Z': _x('Z', 'keyboard key', 'code-snippets'),
	'/': _x('/', 'keyboard key', 'code-snippets'),
	'[': _x(']', 'keyboard key', 'code-snippets'),
	']': _x(']', 'keyboard key', 'code-snippets')
}

export const KEYBOARD_SYMBOLS: Partial<typeof KEYBOARD_KEYS> = {
	Cmd: '⌘',
	Ctrl: '⌃',
	Alt: '⌥',
	Shift: '⇧',
	Tab: '⇥',
	Up: '↑',
	Down: '↓',
	Left: '←',
	Right: '→'
}

const keyMapLabels = {
	saveChanges: __('Save changes', 'code-snippets'),
	selectAll: __('Select all', 'code-snippets'),
	find: __('Begin searching', 'code-snippets'),
	findNext: __('Find next', 'code-snippets'),
	findPrev: __('Find previous', 'code-snippets'),
	replace: __('Replace', 'code-snippets'),
	replaceAll: __('Replace all', 'code-snippets'),
	findPersistent: __('Persistent search', 'code-snippets'),
	toggleComment: __('Toggle comment', 'code-snippets'),
	swapLineUp: __('Swap line up', 'code-snippets'),
	swapLineDown: __('Swap line down', 'code-snippets'),
	autoIndent: __('Auto-indent current line or selection', 'code-snippets')
}

const KEY_ORDER: readonly (keyof typeof KEYBOARD_KEYS)[] = isMacOS()
	? ['Fn', 'Ctrl', 'Alt', 'Shift', 'Cmd']
	: ['Cmd', 'Ctrl', 'Shift', 'Alt', 'Fn']

const getKeyComparisonValue = (key: string): string =>
	KEY_ORDER.includes(key as keyof typeof KEYBOARD_KEYS)
		? String(KEY_ORDER.indexOf(key as keyof typeof KEYBOARD_KEYS))
		: key

const unpackKeyMap = (keyMap: KeyMap): Map<string, string[]> => {
	const result = new Map<string, string[]>()

	for (const [shortcut, action] of Object.entries(keyMap)) {
		if ('string' === typeof action && keyMapLabels[action as keyof typeof keyMapLabels]) {
			const keys = shortcut.split('-')

			keys.sort((a, b) =>
				getKeyComparisonValue(a).localeCompare(getKeyComparisonValue(b)))

			result.set(action, keys)
		}
	}

	return result
}

interface KeyboardShortcutMacProps {
	keys: string[]
	keyLabels: Partial<Record<string, string>>
	keySymbols: Partial<Record<string, string>>
}

const KeyboardShortcutMac: React.FC<KeyboardShortcutMacProps> = ({ keys, keyLabels, keySymbols }) =>
	<span className="keyboard-shortcut mac-keyboard-shortcut">
		{keys.map(key =>
			<kbd key={key}>{keySymbols[key] ?? keyLabels[key] ?? key}</kbd>)}
	</span>

const SEP = _x('+', 'keyboard shortcut separator', 'code-snippets')

interface KeyboardShortcutPCProps {
	keys: string[]
	keyLabels: Partial<Record<string, string>>
}

const KeyboardShortcutPC: React.FC<KeyboardShortcutPCProps> = ({ keys, keyLabels }) =>
	<span className="keyboard-shortcut pc-keyboard-shortcot">
		{keys.map((key, index) =>
			<Fragment key={key}>
				<kbd>{keyLabels[key] ?? key}</kbd>
				{index < keys.length - 1 && <span className="shortcut-separator">{SEP}</span>}
			</Fragment>)}
	</span>

const fallbackKeyMap: Partial<Record<`${string}-${string}`, keyof typeof keyMapLabels>> = {
	'Ctrl-S': 'saveChanges',
	'Shift-Tab': 'autoIndent'
}

const fallbackKeyMapMac: typeof fallbackKeyMap = {
	'Cmd-S': 'saveChanges',
	'Shift-Tab': 'autoIndent'
}

export interface CodeEditorShortcutsProps {
	editorTheme: string
}

export const CodeEditorShortcuts: React.FC<CodeEditorShortcutsProps> = ({ editorTheme }) => {
	const { codeEditorInstance } = useSnippetForm()

	const shortcutKeys: Map<string, string[]> | undefined = useMemo(() => {
		if (codeEditorInstance) {
			const extraKeys = codeEditorInstance.codemirror.getOption('extraKeys')
			const keyMapName = codeEditorInstance.codemirror.getOption('keyMap')

			const combinedKeyMap: KeyMap = {
				...isMacOS() ? fallbackKeyMapMac : fallbackKeyMap,
				...keyMapName && getKeyMap(keyMapName),
				...'object' === typeof extraKeys ? extraKeys : undefined
			}

			return unpackKeyMap(combinedKeyMap)
		}

		return undefined
	},
	[codeEditorInstance]
	)

	return shortcutKeys
		? <div className="snippet-editor-help tooltip tooltip-inline tooltip-start">
			<span className={`dashicons dashicons-editor-help cm-s-${editorTheme}`} aria-hidden="true"></span>

			<div className="tooltip-content">
				<table>
					<tbody>
						{Object.entries(keyMapLabels).map(([action, label]) => {
							const keys = shortcutKeys.get(action)
							return keys
								? <tr key={action}>
									<td>{label}</td>
									<td>
										{isMacOS()
											? <KeyboardShortcutMac
												keys={keys}
												keyLabels={KEYBOARD_KEYS}
												keySymbols={KEYBOARD_SYMBOLS}
											/>
											: <KeyboardShortcutPC
												keys={keys}
												keyLabels={KEYBOARD_KEYS}
											/>}
									</td>
								</tr>
								: null
						})}
					</tbody>
				</table>
			</div>
		</div>
		: null
}