text: /**
   * WordPress dependencies
   */
  import { getPathAndQueryString } from '@wordpress/url';
  import { useSelect } from '@wordpress/data';
  import {
  	Tooltip,
  	DropdownMenu,
  	MenuGroup,
  	MenuItemsChoice,
  } from '@wordpress/components';
  import { Icon, home } from '@wordpress/icons';
  import { __ } from '@wordpress/i18n';
  import { __experimentalLinkControl as LinkControl } from '@wordpress/block-editor';
  
  export default function PageSwitcher( {
  	showOnFront,
  	activePage,
  	onActivePageChange,
  } ) {
  	const { pages = [], categories = [], posts = [] } = useSelect(
  		( select ) => {
  			const { getEntityRecords } = select( 'core' );
  			const pageGroups = {
  				pages: getEntityRecords( 'postType', 'page' )?.map(
  					( _page ) => {
  						const path = getPathAndQueryString( _page.link );
  						return {
  							label:
  								path === '/' ? (
  									<>
  										{ _page.title.rendered }
  										<Tooltip text={ __( 'Home' ) }>
  											<div>
  												<Icon icon={ home } />
  											</div>
  										</Tooltip>
  									</>
  								) : (
  									_page.title.rendered
  								),
  							type: 'page',
  							slug: _page.slug,
  							value: path,
  							context: {
  								postType: 'page',
  								postId: _page.id,
  							},
  						};
  					}
  				),
  				categories: getEntityRecords( 'taxonomy', 'category' )?.map(
  					( category ) => {
  						const path = getPathAndQueryString( category.link );
  						return {
  							label: category.name,
  							type: 'category',
  							slug: category.slug,
  							value: path,
  							context: {
  								query: { categoryIds: [ category.id ] },
  								queryContext: { page: 1 },
  							},
  						};
  					}
  				),
  				posts: [],
  			};
  			if ( showOnFront === 'posts' )
  				pageGroups.posts.unshift( {
  					label: (
  						<>
  							{ __( 'All Posts' ) }
  							<Tooltip text={ __( 'Home' ) }>
  								<div>
  									<Icon icon={ home } />
  								</div>
  							</Tooltip>
  						</>
  					),
  					value: '/',
  					context: {
  						query: { categoryIds: [] },
  						queryContext: { page: 1 },
  					},
  				} );
  			return pageGroups;
  		},
  		[ showOnFront ]
  	);
  
  	const onPageSelect = ( newPath ) => {
  		const { value: path, ...rest } = [
  			...pages,
  			...categories,
  			...posts,
  		].find( ( choice ) => choice.value === newPath );
  		onActivePageChange( { ...rest, path } );
  	};
  
  	const onPostSelect = ( post ) =>
  		onActivePageChange( {
  			type: 'post',
  			slug: post.slug,
  			path: getPathAndQueryString( post.url ),
  			context: { postType: post.type, postId: post.id },
  		} );
  
  	const activePath = activePage?.path;
  	return (
  		<DropdownMenu
  			icon={ null }
  			label={ __( 'Switch Page' ) }
  			toggleProps={ {
  				children:
  					[ ...pages, ...categories, ...posts ].find(
  						( choice ) => choice.value === activePath
  					)?.label || activePath,
  			} }
  			menuProps={ { className: 'edit-site-page-switcher__menu' } }
  		>
  			{ () => (
  				<>
  					<MenuGroup label={ __( 'Pages' ) }>
  						<MenuItemsChoice
  							choices={ pages }
  							value={ activePath }
  							onSelect={ onPageSelect }
  						/>
  					</MenuGroup>
  					<MenuGroup label={ __( 'Categories' ) }>
  						<MenuItemsChoice
  							choices={ categories }
  							value={ activePath }
  							onSelect={ onPageSelect }
  						/>
  					</MenuGroup>
  					<MenuGroup label={ __( 'Posts' ) }>
  						<MenuItemsChoice
  							choices={ posts }
  							value={ activePath }
  							onSelect={ onPageSelect }
  						/>
  						<LinkControl
  							searchInputPlaceholder={ __( 'Search for Post' ) }
  							onChange={ onPostSelect }
  							settings={ {} }
  							noDirectEntry
  							showInitialSuggestions
  						/>
  					</MenuGroup>
  				</>
  			) }
  		</DropdownMenu>
  	);
  }
  