import BaseSection from './base-section';
import * as LinkUtil from '../../utils/link-util';
import * as t from '../../utils/translation-util';
export default class ShortcutsSection extends BaseSection {
	// TODO: TypeScript - Here props should be object type
	props: any;
	constructor(props: any) {
		super();
		this.props = props;
	}
	// TODO - Deduplicate templateMac and templateWinLin functions. In theory
	// they both should be the same the only thing different should be the userOSKey
	// variable but there seems to be inconsistences between both function, one has more
	// lines though one may just be using more new lines and other thing is the use of +.
	templateMac(): string {
		const userOSKey = '⌘';
		return `
						
						settings${t.__('Tip')}:  ${t.__('These desktop app shortcuts extend the Zulip webapp\'s')}  ${t.__('keyboard shortcuts')}.
 
							${t.__('Application Shortcuts')}
							
								
									
										| ${userOSKey}, | 
										${t.__('Settings')} | 
									
									
										| ${userOSKey}K | 
										${t.__('Keyboard Shortcuts')} | 
									
									
										| ${userOSKey} + Shift + M | 
										${t.__('Toggle Do Not Disturb')} | 
									
									
										| Shift${userOSKey}D | 
										${t.__('Reset App Settings')} | 
									
									
										| ${userOSKey}L | 
										${t.__('Log Out')} | 
									
									
										| ${userOSKey}H | 
										${t.__('Hide Zulip')} | 
									
									
										| Option${userOSKey}H | 
										${t.__('Hide Others')} | 
									
									
										| ${userOSKey}Q | 
										${t.__('Quit Zulip')} | 
									
								
								
							 
							${t.__('Edit Shortcuts')}
							
								
									
										| ${userOSKey}Z | 
										${t.__('Undo')} | 
									
									
										| Shift${userOSKey}Z | 
										${t.__('Redo')} | 
									
									
										| ${userOSKey}X | 
										${t.__('Cut')} | 
									
									
										| ${userOSKey}C | 
										${t.__('Copy')} | 
									
									
										| ${userOSKey}V | 
										${t.__('Paste')} | 
									
									
										| Shift${userOSKey}V | 
										${t.__('Paste and Match Style')} | 
									
									
										| ${userOSKey}A | 
										${t.__('Select All')} | 
									
									
										| Control${userOSKey}Space | 
										${t.__('Emoji & Symbols')} | 
									
								
								
							 
							${t.__('View Shortcuts')}
							
								
									
										| ${userOSKey}R | 
										${t.__('Reload')} | 
									
									
										| Shift${userOSKey}R | 
										${t.__('Hard Reload')} | 
									
									
										| Control${userOSKey}F | 
										${t.__('Enter Full Screen')} | 
									
									
										| ${userOSKey}+ | 
										${t.__('Zoom In')} | 
									
									
										| ${userOSKey}- | 
										${t.__('Zoom Out')} | 
									
									
										| ${userOSKey}0 | 
										${t.__('Actual Size')} | 
									
									
										| ${userOSKey} + Shift + S | 
										${t.__('Toggle Sidebar')} | 
									
									
										| Option${userOSKey}I | 
										${t.__('Toggle DevTools for Zulip App')} | 
									
									
										| Option${userOSKey}U | 
										${t.__('Toggle DevTools for Active Tab')} | 
									
									
										| Ctrl + Tab | 
										${t.__('Switch to Next Organization')} | 
									
									
										| Ctrl + Shift + Tab | 
										${t.__('Switch to Previous Organization')} | 
									
								
								
							 
							${t.__('History Shortcuts')}
							
								
									
										| ${userOSKey}← | 
										${t.__('Back')} | 
									
									
										| ${userOSKey}→ | 
										${t.__('Forward')} | 
									
								
								
							 
							Window Shortcuts
							
								
									
										| ${userOSKey}M | 
										${t.__('Minimize')} | 
									
									
										| ${userOSKey}W | 
										${t.__('Close')} | 
									
								
								
							 
						 
		`;
	}
	templateWinLin(): string {
		const userOSKey = 'Ctrl';
		return `
						
						settings${t.__('Tip')}:  ${t.__('These desktop app shortcuts extend the Zulip webapp\'s')}  ${t.__('keyboard shortcuts')}.
 
							${t.__('Application Shortcuts')}
							
								
									
										| ${userOSKey} + , | 
										${t.__('Settings')} | 
									
									
										| ${userOSKey} + K | 
										${t.__('Keyboard Shortcuts')} | 
									
									
										| ${userOSKey} + Shift + M | 
										${t.__('Toggle Do Not Disturb')} | 
									
									
										| ${userOSKey} + L | 
										${t.__('Log Out')} | 
									
									
										| ${userOSKey} + Q | 
										${t.__('Quit Zulip')} | 
									
								
								
							 
							${t.__('Edit Shortcuts')}
							
								
									
										| ${userOSKey} + Z | 
										${t.__('Undo')} | 
									
									
										| ${userOSKey} + Y | 
										${t.__('Redo')} | 
									
									
										| ${userOSKey} + X | 
										${t.__('Cut')} | 
									
									
										| ${userOSKey} + C | 
										${t.__('Copy')} | 
									
									
										| ${userOSKey} + V | 
										${t.__('Paste')} | 
									
									
										| ${userOSKey} + Shift + V | 
										${t.__('Paste and Match Style')} | 
									
									
										| ${userOSKey} + A | 
										${t.__('Select All')} | 
									
								
								
							 
							${t.__('View Shortcuts')}
							
								
									
										| ${userOSKey} + R | 
										${t.__('Reload')} | 
									
									
										| ${userOSKey} + Shift + R | 
										${t.__('Hard Reload')} | 
									
									
										| F11 | 
										${t.__('Toggle Full Screen')} | 
									
									
										| ${userOSKey} + = | 
										${t.__('Zoom In')} | 
									
									
										| ${userOSKey} + - | 
										${t.__('Zoom Out')} | 
									
									
										| ${userOSKey} + 0 | 
										${t.__('Actual Size')} | 
									
									
										| ${userOSKey} + Shift + S | 
										${t.__('Toggle Sidebar')} | 
									
									
										| ${userOSKey} + Shift + I | 
										${t.__('Toggle DevTools for Zulip App')} | 
									
									
										| ${userOSKey} + Shift + U | 
										${t.__('Toggle DevTools for Active Tab')} | 
									
									
										| ${userOSKey} + Tab | 
										${t.__('Switch to Next Organization')} | 
									
									
										| ${userOSKey} + Shift + Tab | 
										${t.__('Switch to Previous Organization')} | 
									
								
								
							 
							${t.__('History Shortcuts')}
							
								
									
										| Alt + ← | 
										${t.__('Back')} | 
									
									
										| Alt + → | 
										${t.__('Forward')} | 
									
								
								
							 
							${t.__('Window Shortcuts')}
							
								
									
										| ${userOSKey} + M | 
										${t.__('Minimize')} | 
									
									
										| ${userOSKey} + W | 
										${t.__('Close')} | 
									
								
								
							 
						 
		`;
	}
	openHotkeysExternalLink(): void {
		const link = 'https://zulipchat.com/help/keyboard-shortcuts';
		const externalCreateNewOrgElement = document.querySelector('#open-hotkeys-link');
		externalCreateNewOrgElement.addEventListener('click', () => {
			LinkUtil.openBrowser(new URL(link));
		});
	}
	init(): void {
		this.props.$root.innerHTML = (process.platform === 'darwin') ?
			this.templateMac() : this.templateWinLin();
		this.openHotkeysExternalLink();
	}
}