import { React, classnames } from '@gravityforms/libraries';
import DroplistGroupItem from './DroplistGroupItem';
import DroplistItem from './DroplistItem';

/**
 * @function getListItems
 * @description Helper function to get droplist items.
 *
 * @since 4.3.0
 *
 * @param {Array}  items          List of items to render.
 * @param {object} propsWithState Props and state to pass to the list items.
 * @param {number} depth          Depth of the item.
 *
 * @return {Array} The list of items.
 */
export const getListItems = ( items = [], propsWithState = {}, depth = 0 ) => {
	return items.map( ( item, index ) => {
		if ( item.listItems ) {
			const key = item.key || buildItemKey( propsWithState.droplistId, depth, index, 'group' );
			const props = {
				depth,
				index,
				item,
				propsWithState: {
					...propsWithState,
					itemKey: key,
				},
			};
			return <DroplistGroupItem key={ key } { ...props } />;
		}

		const itemClassName = classnames( {
			'gform-droplist__item': true,
			'gform-droplist__item--has-divider': item.hasDivider,
		}, item.customClasses || [] );
		const key = item.key || buildItemKey( propsWithState.droplistId, depth, index, 'item' );
		const droplistItemProps = {
			...( item.props || {} ),
			depth,
			index,
			propsWithState: {
				...propsWithState,
				itemKey: key,
			},
		};
		return (
			<li key={ key } className={ itemClassName }>
				<DroplistItem { ...droplistItemProps } />
			</li>
		);
	} );
};

/**
 * @function buildItemKey
 * @description Helper function to build an item key.
 *
 * @since 6.0.1
 *
 * @param {string} prefix The prefix for the key.
 * @param {string} depth  The depth of the item.
 * @param {string} index  The index of the item.
 * @param {string} type   The type of the item.
 *
 * @return {string} The item key.
 */
export const buildItemKey = ( prefix, depth, index, type ) => `${ prefix }-${ depth }-${ index }-${ type }`;
