import { __ } from '@wordpress/i18n';

type Capabilities = Record<string, boolean>;

type Props = {
	ready: boolean;
	canUndo: boolean;
	canRedo: boolean;
	formatValue: string;
	onFormatChange: (value: string) => void;
	capabilities: Capabilities;
	onCommand: (name: string, value?: string) => void;
	onRememberSelection: () => void;
	onOpenLink: () => void;
	onOpenMedia: (type: 'image' | 'video') => void;
};

export function EditorToolbar({
	ready,
	canUndo,
	canRedo,
	formatValue,
	onFormatChange,
	capabilities,
	onCommand,
	onRememberSelection,
	onOpenLink,
	onOpenMedia,
}: Props) {
	return (
		<div
			className="jio-creator__toolbar-tools"
			role="toolbar"
			aria-label={__('正文编辑工具', 'jio')}
			onMouseDown={(event) => {
				onRememberSelection();
				if ((event.target as HTMLElement).closest('button')) event.preventDefault();
			}}
		>
			<div className="jio-creator__toolbar-group" role="group" aria-label={__('撤销和重做', 'jio')}>
				<button type="button" className="jio-creator__tool-btn" disabled={!canUndo} onClick={() => onCommand('undo')} title={__('撤销', 'jio')} aria-label={__('撤销', 'jio')}>
					<i className="fa fas fa-undo" aria-hidden="true" />
				</button>
				<button type="button" className="jio-creator__tool-btn" disabled={!canRedo} onClick={() => onCommand('redo')} title={__('重做', 'jio')} aria-label={__('重做', 'jio')}>
					<i className="fa fas fa-redo" aria-hidden="true" />
				</button>
			</div>
			<span className="jio-creator__toolbar-divider" aria-hidden="true" />
			<select
				className="jio-creator__format-select"
				aria-label={__('段落样式', 'jio')}
				value={formatValue}
				disabled={!ready}
				onFocus={onRememberSelection}
				onChange={(event) => {
					onFormatChange(event.target.value);
					onCommand('format', event.target.value);
				}}
			>
				<option value="p">{__('正文', 'jio')}</option>
				<option value="h1">{__('标题 1', 'jio')}</option>
				<option value="h2">{__('标题 2', 'jio')}</option>
				<option value="h3">{__('标题 3', 'jio')}</option>
				<option value="blockquote">{__('引用', 'jio')}</option>
			</select>
			<span className="jio-creator__toolbar-divider" aria-hidden="true" />
			<div className="jio-creator__toolbar-group" role="group" aria-label={__('文字格式', 'jio')}>
				<button type="button" className="jio-creator__tool-btn" disabled={!ready} onClick={() => onCommand('Bold')} title={__('加粗', 'jio')} aria-label={__('加粗', 'jio')}>
					<i className="fa fas fa-bold" aria-hidden="true" />
				</button>
				<button type="button" className="jio-creator__tool-btn" disabled={!ready} onClick={() => onCommand('Italic')} title={__('斜体', 'jio')} aria-label={__('斜体', 'jio')}>
					<i className="fa fas fa-italic" aria-hidden="true" />
				</button>
				<button type="button" className="jio-creator__tool-btn" disabled={!ready} onClick={() => onCommand('Underline')} title={__('下划线', 'jio')} aria-label={__('下划线', 'jio')}>
					<i className="fa fas fa-underline" aria-hidden="true" />
				</button>
			</div>
			<span className="jio-creator__toolbar-divider" aria-hidden="true" />
			<div className="jio-creator__toolbar-group" role="group" aria-label={__('媒体和链接', 'jio')}>
				{capabilities.canUploadImage && (
					<button type="button" className="jio-creator__tool-btn jio-creator__tool-labeled" disabled={!ready} onClick={() => onOpenMedia('image')} title={__('插入图片', 'jio')}>
						<i className="fa far fa-image" aria-hidden="true" /><span>{__('图片', 'jio')}</span>
					</button>
				)}
				{(capabilities.canUploadVideo || capabilities.canEmbed) && (
					<button type="button" className="jio-creator__tool-btn jio-creator__tool-labeled" disabled={!ready} onClick={() => onOpenMedia('video')} title={__('插入视频', 'jio')}>
						<i className="fa fas fa-video" aria-hidden="true" /><span>{__('视频', 'jio')}</span>
					</button>
				)}
				<button type="button" className="jio-creator__tool-btn jio-creator__tool-labeled" disabled={!ready} onClick={onOpenLink} title={__('插入链接', 'jio')}>
					<i className="fa fas fa-link" aria-hidden="true" /><span>{__('链接', 'jio')}</span>
				</button>
			</div>
		</div>
	);
}