//
// A button with a long-press action. Long-pressing the button displays a tooltip
//

import * as React from 'react';
import { themeStyle } from '@joplin/lib/theme';
import { useState, useMemo, useCallback, useRef, Ref } from 'react';
import { Text, Pressable, ViewStyle, StyleSheet, LayoutChangeEvent, LayoutRectangle, Animated, AccessibilityState, AccessibilityRole, TextStyle, GestureResponderEvent, Platform, Role, StyleProp, View } from 'react-native';
import { Menu, MenuOptions, MenuTrigger, renderers } from 'react-native-popup-menu';
import Icon from './Icon';
import AccessibleView from './accessibility/AccessibleView';

type ButtonClickListener = ()=> void;
interface ButtonProps {
	onPress: ButtonClickListener;

	pressableRef?: Ref<View>;

	// Accessibility label and text shown in a tooltip
	description: string;

	iconName: string;
	iconStyle: StyleProp<TextStyle>;

	themeId: number;

	// (web only) On web, touching buttons can cause the on-screen keyboard to be dismissed.
	// Setting preventKeyboardDismiss overrides this behavior.
	preventKeyboardDismiss?: boolean;

	containerStyle?: ViewStyle;
	contentWrapperStyle?: ViewStyle;

	// Additional accessibility information. See View.accessibilityHint
	accessibilityHint?: string;

	// Role of the button. Defaults to 'button'.
	accessibilityRole?: AccessibilityRole;
	accessibilityState?: AccessibilityState;
	'aria-pressed'?: boolean;
	role?: Role;

	disabled?: boolean;
}

const IconButton = (props: ButtonProps) => {
	const [tooltipVisible, setTooltipVisible] = useState(false);
	const [buttonLayout, setButtonLayout] = useState<LayoutRectangle|null>(null);
	const { styles, fadeAnimation } = useStyles(props.themeId, props.contentWrapperStyle);


	const animationDuration = 100; // ms
	const onPressIn = useCallback(() => {
		// Fade out.
		Animated.timing(fadeAnimation.current, {
			toValue: 0.5,
			duration: animationDuration,
			useNativeDriver: true,
		}).start();
	}, [fadeAnimation]);
	const onPressOut = useCallback(() => {
		// Fade in.
		Animated.timing(fadeAnimation.current, {
			toValue: 1,
			duration: animationDuration,
			useNativeDriver: true,
		}).start();

		setTooltipVisible(false);
	}, [fadeAnimation]);
	const onLongPress = useCallback(() => {
		setTooltipVisible(true);
	}, []);

	const onButtonLayout = useCallback((event: LayoutChangeEvent) => {
		const layoutEvt = event.nativeEvent.layout;

		// Copy the layout event
		setButtonLayout({ ...layoutEvt });
	}, []);

	const { onTouchStart, onTouchMove, onTouchEnd } = usePreventKeyboardDismissTouchListeners(
		props.preventKeyboardDismiss, props.onPress, props.disabled,
	);

	let icon = <Icon
		name={props.iconName}
		style={props.iconStyle}
		accessibilityLabel={null}
	/>;
	// Include browser-provided tooltips on web.
	icon = Platform.OS === 'web' ? <span title={props.description}>{icon}</span> : icon;

	const button = (
		<Pressable
			ref={props.pressableRef}
			onPress={props.onPress}
			onLongPress={onLongPress}
			onPressIn={onPressIn}
			onPressOut={onPressOut}

			onTouchStart={onTouchStart}
			onTouchMove={onTouchMove}
			onTouchEnd={onTouchEnd}

			style={[styles.pressable, props.containerStyle]}

			disabled={ props.disabled ?? false }
			onLayout={ onButtonLayout }

			accessibilityLabel={props.description}
			accessibilityHint={props.accessibilityHint}
			accessibilityRole={props.accessibilityRole ?? 'button'}
			role={props.role}
			accessibilityState={props.accessibilityState}
			aria-pressed={props['aria-pressed']}
		>
			<Animated.View style={[props.contentWrapperStyle, styles.animatedContentWrapper]}>
				{icon}
			</Animated.View>
		</Pressable>
	);

	const renderTooltip = () => {
		if (!props.description) return null;

		return (
			<AccessibleView
				// Any information given by the tooltip should also be provided via
				// [accessibilityLabel]/[accessibilityHint]. As such, we can hide the tooltip
				// from the screen reader.
				inert={true}

				// Position the menu beneath the button so the tooltip appears in the
				// correct location.
				style={{
					left: buttonLayout?.x,
					top: buttonLayout?.y,
					position: 'absolute',
					zIndex: -1,
				}}
			>
				<Menu
					opened={tooltipVisible}
					renderer={renderers.Popover}
					rendererProps={{
						preferredPlacement: 'bottom',
						anchorStyle: styles.tooltipAnchor,
					}}>
					<MenuTrigger
						// Don't show/hide when pressed (let the Pressable handle opening/closing)
						disabled={true}
						style={{
							// Ensure that the trigger region has the same size as the button.
							width: buttonLayout?.width ?? 0,
							height: buttonLayout?.height ?? 0,
						}}
					/>
					<MenuOptions
						customStyles={{ optionsContainer: styles.tooltipOptionsContainer }}
					>
						<Text style={styles.tooltipText}>
							{props.description}
						</Text>
					</MenuOptions>
				</Menu>
			</AccessibleView>
		);
	};

	return (
		<>
			{renderTooltip()}
			{button}
		</>
	);
};

const useStyles = (themeId: number, contentWrapperStyle: ViewStyle|null) => {
	const theme = themeStyle(themeId);

	// See https://blog.logrocket.com/react-native-touchable-vs-pressable-components/
	// for more about animating Pressable buttons.
	const fadeAnimation = useRef(new Animated.Value(1));

	const buttonOpacity = contentWrapperStyle?.opacity ?? 1;

	const styles = useMemo(() => {
		return StyleSheet.create({
			// Apply the contentWrapperOpacity to the pressable to avoid conflicts
			// with the fade animation.
			pressable: { opacity: buttonOpacity },
			animatedContentWrapper: { opacity: fadeAnimation.current },

			tooltipText: {
				color: theme.raisedColor,
				padding: 4,
			},
			tooltipAnchor: {
				backgroundColor: theme.raisedBackgroundColor,
			},
			tooltipOptionsContainer: {
				backgroundColor: theme.raisedBackgroundColor,
			},
		});
	}, [theme, buttonOpacity]);

	return { styles, fadeAnimation };
};

// On web, by default, pressing buttons defocuses the active edit control, dismissing the
// virtual keyboard. This hook creates listeners that optionally prevent the keyboard from dismissing.
const usePreventKeyboardDismissTouchListeners = (preventKeyboardDismiss: boolean, onPress: ()=> void, disabled: boolean) => {
	const touchStartPointRef = useRef<[number, number]>([-1, -1]);
	const isTapRef = useRef<boolean>(false);
	const onTouchStart = useCallback((event: GestureResponderEvent) => {
		if (Platform.OS === 'web' && preventKeyboardDismiss) {
			const touch = event.nativeEvent.touches[0];
			touchStartPointRef.current = [touch?.pageX, touch?.pageY];
			isTapRef.current = true;
		}
	}, [preventKeyboardDismiss]);

	const onTouchMove = useCallback((event: GestureResponderEvent) => {
		if (Platform.OS === 'web' && preventKeyboardDismiss && isTapRef.current) {
			// Update isTapRef onTouchMove, rather than onTouchEnd -- the final
			// touch position is unavailable in onTouchEnd on some devices.
			const touch = event.nativeEvent.touches[0];
			const dx = touch?.pageX - touchStartPointRef.current[0];
			const dy = touch?.pageY - touchStartPointRef.current[1];
			isTapRef.current = Math.hypot(dx, dy) < 15;
		}
	}, [preventKeyboardDismiss]);

	const onTouchEnd = useCallback((event: GestureResponderEvent) => {
		if (Platform.OS === 'web' && preventKeyboardDismiss) {
			if (isTapRef.current && !disabled) {
				event.preventDefault();
				onPress();
			}
		}
	}, [onPress, disabled, preventKeyboardDismiss]);

	return { onTouchStart, onTouchMove, onTouchEnd };
};

export default IconButton;