import React from 'react';
import { MdLinkOff, MdModeEdit } from 'react-icons/md';

import { Editor } from '@tiptap/core';
import { BubbleMenuProps } from '@tiptap/react';
import { IconButtonGroup } from '@strapi/design-system';
import { BubbleMenuLink, ExternalLink } from './styles';
import { ActiveButton } from '../Toolbar/Buttons/styles';
import { EditorView } from 'prosemirror-view';
import { EditorState } from 'prosemirror-state';

import type { IInternalLink } from '@webbio/strapi-plugin-internal-links/admin/src/components/factory/index.ts';

export interface IMenuLink extends Omit<BubbleMenuProps, 'children' | 'editor'> {
	editor: Editor;
	openLinkModal: () => void;
	linkModalOpen: boolean;
	unlink: () => void;
	link: IInternalLink | undefined;
}

type IShouldShowProps = {
	editor: Editor;
	view: EditorView;
	state: EditorState;
	oldState?: EditorState;
	from: number;
	to: number;
};

const MenuLink = (props: IMenuLink): JSX.Element => {
	const { editor, linkModalOpen, link } = props;

	const onUnlink = (): void => {
		editor.commands.unsetLink();
		props.unlink();
	};

	const shouldShow = ({ editor }: IShouldShowProps): boolean =>
		(editor.isActive('link') && editor.state.selection.from !== editor.state.selection.to) || editor.isActive('button');

	return (
		<BubbleMenuLink
			tippyOptions={{ duration: 100, placement: 'bottom' }}
			shouldShow={shouldShow}
			hide={linkModalOpen}
			{...props}
		>
			{link?.url && (
				<ExternalLink isExternal href={link?.url}>
					{link?.url}
				</ExternalLink>
			)}
			<IconButtonGroup>
				<ActiveButton onClick={() => props.openLinkModal()} label="Edit" icon={<MdModeEdit />} />
				{!editor.isActive('button') && <ActiveButton onClick={onUnlink} label="Unlink" icon={<MdLinkOff />} />}
			</IconButtonGroup>
		</BubbleMenuLink>
	);
};

export default MenuLink;