import {
	__experimentalUseNavigator as useNavigator,
} from '@wordpress/components'

import {
	sanitizeURIComponent,
} from '@ska/utils'

import {
	sanitizeVariant,
} from '../../tailwind/attributes'

export const useNavigateToSelector = () => {

	const navigator = useNavigator()

	return (selector: string) => {

		let targetSelector = selector.trim()

		while(targetSelector[targetSelector.length - 1] === ':') {
			targetSelector = targetSelector.substring(0, targetSelector.length - 1)
		}

		targetSelector = sanitizeVariant(targetSelector)

		if(!targetSelector) {
			return
		}

		let location = navigator?.location?.path || ''
		while(location && location[0] === '/') {
			location = location.substring(1)
		}
		if(!location) {
			location = 'selector'
		}
		const parts = location.split('/')
		parts.push(sanitizeURIComponent(targetSelector))
		const nextLocation = `/${parts.join('/')}`

		navigator.goTo(nextLocation, {replace: false, skipFocus: true})
	}
}