import { Node } from '@tiptap/core'

export interface IframeOptions {
	allowFullscreen: boolean
	HTMLAttributes: {
		[key: string]: unknown
	}
}

declare module '@tiptap/core' {
	interface Commands<ReturnType> {
		iframe: {
			/**
			 * Add an iframe with src
			 */
			setIframe: (options: { src: string }) => ReturnType
			removeIframe: () => ReturnType
		}
	}
}

export default Node.create<IframeOptions>({
	name: 'iframe',

	group: 'block',

	atom: true,

	addOptions() {
		return {
			allowFullscreen: true,
			HTMLAttributes: {
				class: 'iframe-wrapper'
			}
		}
	},

	addAttributes() {
		return {
			src: {
				default: null
			},
			frameborder: {
				default: 0
			},
			allowfullscreen: {
				default: this.options.allowFullscreen,
				parseHTML: () => this.options.allowFullscreen
			}
		}
	},

	parseHTML() {
		return [
			{
				tag: 'iframe'
			}
		]
	},

	renderHTML({ HTMLAttributes }) {
		return ['div', this.options.HTMLAttributes, ['iframe', HTMLAttributes]]
	},

	addCommands() {
		return {
			setIframe:
				(options: { src: string }) =>
				({ tr, dispatch }) => {
					const { selection } = tr
					const node = this.type.create(options)

					if (dispatch) {
						tr.replaceRangeWith(selection.from, selection.to, node)
					}

					return true
				},
			removeIframe:
				() =>
				({ commands }) =>
					commands.deleteNode(this.name)
		}
	}
})
