import { React, classnames, PropTypes } from '@gravityforms/libraries';
import { IdProvider, useIdContext, useFocusTrap, usePopup } from '@gravityforms/react-utils';
import { focusSelector } from '@gravityforms/react-utils/src/hooks/helpers/tabbable';
import { spacerClasses } from '@gravityforms/utils';
import DroplistList from './DroplistList';
import { buildItemKey } from './utils';
import Button from '../../elements/Button';
import Popover from '../../elements/Popover';
import { ESCAPE } from '../../utils/keymap';

const { forwardRef, useCallback, useEffect, useState, useRef } = React;

const DroplistComponent = forwardRef( ( props, ref ) => { // eslint-disable-line no-unused-vars
	const {
		align,
		closeOnClick,
		customAttributes,
		customClasses,
		droplistAttributes,
		listItems,
		onAfterClose,
		onAfterOpen,
		onClose,
		onOpen,
		openOnHover,
		stackNestedGroups,
		triggerAttributes,
		width,
	} = props;
	const [ listItemsState, setListItemsState ] = useState( listItems );
	const [ depth, setDepth ] = useState( 0 );
	const [ selectedState, setSelectedState ] = useState( {} );
	const containerRef = useRef( null );
	const {
		closePopup,
		openPopup,
		handleEscKeyDown,
		popupHide,
		popupOpen,
		popupReveal,
		popupRef,
		triggerRef,
	} = usePopup( {
		onAfterClose: () => {
			onAfterClose();
			if ( ! stackNestedGroups ) {
				return;
			}
			setSelectedState( {} );
		},
		onAfterOpen,
		onClose: () => {
			onClose();
			if ( stackNestedGroups ) {
				return;
			}
			setSelectedState( {} );
		},
		onOpen,
	} );
	const trapRef = useFocusTrap( popupOpen );
	const id = useIdContext();

	const depthKeys = Object.keys( selectedState );

	/* Wrapper props */
	const wrapperProps = {
		className: classnames( {
			'gform-droplist': true,
		}, customClasses ),
		id,
		...customAttributes,
	};

	/* Trigger props */
	const {
		ariaId: triggerAriaId = `${ id }-trigger-aria`,
		ariaText: triggerAriaText = '',
		customAttributes: triggerCustomAttributes = {},
		customClasses: triggerCustomClasses = [],
		id: triggerId = `${ id }-trigger`,
		onClick: triggerOnClick = () => {},
		onKeyDown: triggerOnKeyDown = () => {},
		title: triggerTitle = '',
		...restTriggerAttributes
	} = triggerAttributes;
	const triggerProps = {
		customClasses: classnames( {
			'gform-droplist__trigger': true,
		}, triggerCustomClasses || [] ),
		customAttributes: {
			'aria-expanded': popupOpen ? 'true' : 'false',
			'aria-haspopup': 'listbox',
			'aria-labelledby': triggerTitle ? undefined : `${ triggerAriaId } ${ triggerId }`,
			id: triggerId,
			onKeyDown: ( event ) => {
				triggerOnKeyDown( event );
				handleEscKeyDown( event );
			},
			title: triggerTitle || undefined,
			...triggerCustomAttributes,
		},
		ref: triggerRef,
		onClick: ( event ) => {
			triggerOnClick( event );
			if ( popupOpen ) {
				closePopup();
			} else {
				openPopup();
			}
		},
		size: 'size-height-m',
		type: 'white',
		...restTriggerAttributes,
	};

	/* Droplist props */
	const {
		customClasses: droplistCustomClasses = [],
		onKeyDown: droplistOnKeyDown = () => {},
		...restDroplistAttributes
	} = droplistAttributes;
	const popoverProps = {
		align,
		autoPlacement: true,
		containerRef,
		customClasses: classnames( {
			'gform-droplist__popover': true,
		}, droplistCustomClasses ),
		isHide: popupHide,
		isOpen: popupOpen,
		isReveal: popupReveal,
		popoverAttributes: {
			'aria-labelledby': triggerAriaId,
			onKeyDown: ( event ) => {
				droplistOnKeyDown( event );
				if ( stackNestedGroups && depth > 0 && event.key === ESCAPE ) {
					const filteredState = depthKeys
						.filter( ( key ) => key < depth - 1 )
						.reduce( ( acc, key ) => {
							acc[ key ] = selectedState[ key ];
							return acc;
						}, {} );
					setSelectedState( filteredState );
					return;
				}
				handleEscKeyDown( event );
			},
		},
		popoverClasses: spacerClasses( [ 2, 0, 0 ] ),
		popoverRef: popupRef,
		triggerRef,
		width,
		...restDroplistAttributes,
	};

	/* Droplist list props */
	const droplistListProps = {
		align,
		closeDroplist: closePopup,
		closeOnClick,
		depth,
		droplistId: id,
		itemKey: id,
		openOnHover,
		selectedState,
		setSelectedState,
		stackNestedGroups,
		listItems: listItemsState,
	};

	useEffect( () => {
		if ( ! stackNestedGroups ) {
			setDepth( 0 );
			setListItemsState( listItems );
			return;
		}

		if ( depthKeys.length === 0 ) {
			setDepth( 0 );
			setListItemsState( listItems );
		} else {
			const depthKeysArr = depthKeys.reduce( ( acc, key ) => {
				const parsedKey = parseInt( key, 10 );
				if ( ! isNaN( parsedKey ) && selectedState[ key ] ) {
					acc.push( parsedKey );
				}
				return acc;
			}, [] );
			if ( depthKeysArr.length === 0 ) {
				setDepth( 0 );
				setListItemsState( listItems );
			} else {
				const deepestKey = Math.max( ...depthKeysArr );
				const selectedId = selectedState[ deepestKey ];
				const findListItemsById = ( items, itemsDepth, idToFind ) => {
					for ( const [ itemIndex, item ] of items.entries() ) {
						if ( item?.triggerAttributes?.id && item.triggerAttributes.id === idToFind ) {
							return item.listItems || [];
						}
						const itemKey = buildItemKey( id, itemsDepth, itemIndex, 'group' );
						if ( `${ itemKey }-trigger` === idToFind ) {
							return item.listItems || [];
						}
						if ( item.listItems ) {
							const found = findListItemsById( item.listItems, itemsDepth + 1, idToFind );
							if ( found.length > 0 ) {
								return found;
							}
						}
					}
					return [];
				};
				const newListItems = findListItemsById( listItems, 0, selectedId );
				const newDepth = depthKeys.length ? Math.max( ...depthKeys.map( ( key ) => parseInt( key, 10 ) + 1 ) ) : 0;
				setListItemsState( newListItems );
				setDepth( newDepth );
			}
		}

		setTimeout( () => {
			if ( ! popupRef?.current || ! popupOpen ) {
				return;
			}

			const firstFocusableEl = popupRef.current.querySelector( focusSelector );
			if ( ! firstFocusableEl ) {
				return;
			}

			firstFocusableEl.focus();
		}, 0 );
	}, [ depthKeys, id, listItems, popupOpen, popupRef, selectedState, stackNestedGroups ] );

	const setRefs = useCallback( ( node ) => {
		trapRef( node );
		containerRef.current = node;
		if ( ref ) {
			ref.current = node;
		}
	}, [ ref, trapRef ] );

	return (
		<div { ...wrapperProps } ref={ setRefs }>
			{ triggerTitle ? null : (
				<span
					className="gform-visually-hidden"
					id={ triggerAriaId }
				>
					{ triggerAriaText }
				</span>
			) }
			<Button { ...triggerProps } />
			<Popover { ...popoverProps }>
				<DroplistList { ...droplistListProps } />
			</Popover>
		</div>
	);
} );

/**
 * @module Droplist
 * @description The Droplist component with id wrapper.
 *
 * @since 4.3.0
 *
 * @param {object}              props                    Props for the Droplist component.
 * @param {string}              props.align              The alignment of the droplist, one of `left` or `right`.
 * @param {boolean}             props.closeOnClick       Whether to close the droplist when an item is clicked.
 * @param {object}              props.customAttributes   The custom attributes for the droplist.
 * @param {string|Array|object} props.customClasses      The custom classes for the droplist.
 * @param {object}              props.droplistAttributes The droplist attributes.
 * @param {string}              props.id                 The id of the droplist.
 * @param {Array}               props.listItems          The list items for the droplist.
 * @param {Function}            props.onAfterClose       The callback function to run after the droplist closes.
 * @param {Function}            props.onAfterOpen        The callback function to run after the droplist opens.
 * @param {Function}            props.onClose            The callback function to run when the droplist closes.
 * @param {Function}            props.onOpen             The callback function to run when the droplist opens.
 * @param {boolean}             props.openOnHover        Whether to open sublists on hover. Does not work when `stackNestedGroups` is true.
 * @param {boolean}             props.stackNestedGroups  Whether to stack nested groups.
 * @param {object}              props.triggerAttributes  The trigger attributes for the droplist.
 * @param {number}              props.width              The width of the droplist.
 * @param {object}              ref                      The ref for the droplist.
 *
 * @return {JSX.Element} The Droplist component.
 */
const Droplist = forwardRef( ( props, ref ) => {
	const defaultProps = {
		align: 'left',
		closeOnClick: false,
		customAttributes: {},
		customClasses: [],
		droplistAttributes: {},
		id: '',
		listItems: [],
		onAfterClose: () => {},
		onAfterOpen: () => {},
		onClose: () => {},
		onOpen: () => {},
		openOnHover: false,
		stackNestedGroups: false,
		triggerAttributes: {},
		width: 0,
	};
	const combinedProps = { ...defaultProps, ...props };
	const { id: idProp } = combinedProps;
	const idProviderProps = { id: idProp };

	return (
		<IdProvider { ...idProviderProps }>
			<DroplistComponent { ...combinedProps } ref={ ref } />
		</IdProvider>
	);
} );

Droplist.propTypes = {
	align: PropTypes.oneOf( [ 'left', 'right' ] ),
	closeOnClick: PropTypes.bool,
	customAttributes: PropTypes.object,
	customClasses: PropTypes.oneOfType( [
		PropTypes.string,
		PropTypes.array,
		PropTypes.object,
	] ),
	droplistAttributes: PropTypes.object,
	id: PropTypes.string,
	listItems: PropTypes.array,
	onAfterClose: PropTypes.func,
	onAfterOpen: PropTypes.func,
	onClose: PropTypes.func,
	onOpen: PropTypes.func,
	openOnHover: PropTypes.bool,
	stackNestedGroups: PropTypes.bool,
	triggerAttributes: PropTypes.object,
	width: PropTypes.number,
};

Droplist.displayName = 'Droplist';

export default Droplist;
