import * as React from 'react'
import {__, _x} from '@wordpress/i18n'

import {
	useReducer,
} from '@wordpress/element'

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

import {
	cog as cogIcon,
	seen as eyeIcon,
	details as detailsIcon,
} from '@wordpress/icons'

import {
	Button,
	ButtonGroup,
} from '@ska/components'

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

import {
	RecordEditor,
} from '../../../components'

import {
	useSkaBlocksDispatch,
} from '../../../tailwind/reducer'

import {
	usePluginPreference,
} from '../../../store'

import type {
	tBlockAttributes,
	tBlockEditProps,
} from '@ska/shared'

import {
	getSelectorDisplayName,
} from '..'

import {
	SelectorsDetailsModal,
} from '.'

const NO_SELECTORS = {}

export interface SelectorNavProps {
	attributes: tBlockAttributes
	setAttributes: tBlockEditProps['setAttributes']
}

const IS_SMALL = !IS_SETTINGS_PAGE

const SelectorNav: React.FC<SelectorNavProps> = ({
	attributes,
	setAttributes,
}) => {

	const navigator = useNavigator()
	const [isOpen, toggleOpen] = useReducer(isOpen => !isOpen, false)
	const [detailsModalOpen, toggleDetailsModalOpen] = useReducer(isOpen => !isOpen, false)
	const [showNestedSelectors, setShowNestedSelectors] = usePluginPreference('showNestedSelectors')

	const {
		skaBlocksSelectors = {},
	} = attributes

	const dispatch = useSkaBlocksDispatch(attributes, setAttributes)

	const selectors = Object.keys(skaBlocksSelectors).filter(v => v)
	if(!selectors.length) {
		return null
	}

	const currentPath = navigator?.location?.path || '/'
	const nextPath = currentPath === '/' ? '/selector' : currentPath

	const OPTIONS = selectors.map(selector => ({
		label: getSelectorDisplayName(selector),
		value: `${nextPath}/${sanitizeURIComponent(selector)}`,
	}))

	return <>
		<ButtonGroup.Radio
			className='ska-blocks__selector-nav'
			label={__('Selectors', 'ska-blocks')}
			hideLabelFromVision
			isSmall={IS_SMALL}
			pills
			options={OPTIONS}
			value={navigator.location.path || '/'}
			onChange={nextSelector => {
				if(nextSelector) {
					navigator.goTo(nextSelector)
				} else {
					navigator.goTo('/')
				}
			}}
			prepend={<>
				<Button
					className='ska-blocks__selector-nav__compact-icon-button'
					label={__('Show selectors hierarchy', 'ska-blocks')}
					showTooltip
					tooltipPosition='top right'
					icon={detailsIcon}
					iconSize={16}
					size={IS_SMALL ? 'small' : undefined}
					aria-pressed={detailsModalOpen}
					onClick={toggleDetailsModalOpen}
				/>
			</>}
			append={<>
				<Button
					className='ska-blocks__selector-nav__compact-icon-button'
					aria-label={__('Toggle visibility of class names from nested selectors', 'ska-blocks')}
					label={showNestedSelectors ? __('Hide nested classes', 'ska-blocks') : __('Show nested classes', 'ska-blocks')}
					showTooltip
					icon={eyeIcon}
					iconSize={16}
					size={IS_SMALL ? 'small' : undefined}
					aria-pressed={showNestedSelectors}
					onClick={() => setShowNestedSelectors(!showNestedSelectors)}
				/>
				<Button
					className='ska-blocks__selector-nav__compact-icon-button'
					aria-label={__('Toggle visibility of selector ordering controls', 'ska-blocks')}
					label={__('Selector ordering', 'ska-blocks')}
					showTooltip
					icon={cogIcon}
					iconSize={16}
					size={IS_SMALL ? 'small' : undefined}
					aria-pressed={isOpen}
					onClick={toggleOpen}
				/>
			</>}
		/>
		{isOpen && <>
			<RecordEditor
				id='ska-blocks-edit-selectors'
				className='ska-blocks--use-code-inputs'
				value={skaBlocksSelectors}
				defaultValue={NO_SELECTORS}
				onChange={dispatch.setSelectors}
				ValueControl={false}
			/>
		</>}
		{detailsModalOpen && <>
			<SelectorsDetailsModal
				value={skaBlocksSelectors}
				onRequestClose={toggleDetailsModalOpen}
			/>
		</>}
	</>
}

export default SelectorNav