import React, { Fragment, useEffect, useRef, useState } from 'react';
import { createPortal } from 'react-dom';

import invariant from 'tiny-invariant';

import LinkButton from '@atlaskit/button/link';
import ShortcutIcon from '@atlaskit/icon/core/link-external';
import { easeInOut } from '@atlaskit/motion/curves';
import { durations } from '@atlaskit/motion/utils/durations';
import { autoScrollWindowForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element';
import { draggable } from '@atlaskit/pragmatic-drag-and-drop/adapter/element-adapter';
import { combine } from '@atlaskit/pragmatic-drag-and-drop/utils/combine';
import { preserveOffsetOnSource } from '@atlaskit/pragmatic-drag-and-drop/utils/preserve-offset-on-source';
import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/utils/set-custom-native-drag-preview';
// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
import { Box, Stack, xcss } from '@atlaskit/primitives';

import Logo from './logo';

type State = { type: 'idle' } | { type: 'preview'; container: HTMLElement } | { type: 'dragging' };

const baseStyles = xcss({
	// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
	transition: `opacity ${durations.medium}ms ${easeInOut}`,
});

const stateStyles: {
	[Key in State['type']]: ReturnType<typeof xcss> | undefined;
} = {
	dragging: xcss({
		opacity: 0.4,
	}),
	idle: xcss({
		cursor: 'grab',
	}),
	preview: undefined,
};

const idle: State = { type: 'idle' };

export default function Hero(): React.JSX.Element {
	const ref = useRef<HTMLDivElement | null>(null);
	const [state, setState] = useState<State>(idle);

	useEffect(() => {
		const element = ref.current;
		invariant(element);
		return combine(
			draggable({
				element,
				getInitialDataForExternal: () => ({
					'text/uri-list': window.location.href,
				}),
				onGenerateDragPreview({ nativeSetDragImage, location }) {
					setCustomNativeDragPreview({
						nativeSetDragImage,
						getOffset: preserveOffsetOnSource({
							element,
							input: location.current.input,
						}),
						render({ container }) {
							setState({ type: 'preview', container });
						},
					});
				},
				onDragStart() {
					setState({ type: 'dragging' });
				},
				onDrop() {
					setState(idle);
				},
			}),
			// enabling window auto scrolling for a bit of delight
			autoScrollWindowForElements({
				canScroll({ source }) {
					return source.element === element;
				},
			}),
		);
	}, []);

	return (
		<Fragment>
			<Stack alignInline="center" space="space.100">
				<Box ref={ref} xcss={[baseStyles, stateStyles[state.type]]}>
					<Logo mode="standard" />
				</Box>
				<LinkButton
					iconAfter={ShortcutIcon}
					href="https://github.com/atlassian/pragmatic-drag-and-drop"
				>
					Github
				</LinkButton>
			</Stack>
			{state.type === 'preview' ? createPortal(<Logo mode="alternative" />, state.container) : null}
		</Fragment>
	);
}