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

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

import {
	__experimentalNavigatorScreen as NavigatorScreen,
} from '@wordpress/components'

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

import {
	ApplyTailwindContext,
} from '../../../tailwind'

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

import {
	SelectorEdit,
} from '.'

export interface SelectorScreensProps {
	root?: string
	attributes: tBlockAttributes
	setAttributes: tBlockEditProps['setAttributes']
}

const SelectorScreens: React.FC<SelectorScreensProps> = ({
	root = '/selector',
	attributes,
	setAttributes,
}) => {

	const {
		skaBlocksSelectors = {},
	} = attributes

	const selectors = Object.keys(skaBlocksSelectors)

	return (
		<ApplyTailwindContext.Provider value={false}>
			{selectors.map(selector => {
				return (
					<Fragment key={`selector-screens-${selector}`}>
						<NavigatorScreen
							key={`screen-${selector}`}
							path={`${root}/${sanitizeURIComponent(selector)}`}
						>
							<SelectorEdit
								selector={selector}
								attributes={attributes}
								setAttributes={setAttributes}
							/>
						</NavigatorScreen>
						<SelectorScreens
							root={`${root}/${sanitizeURIComponent(selector)}`}
							attributes={skaBlocksSelectors[selector]}
							setAttributes={nextAttributes => {
								setAttributes({
									...attributes,
									skaBlocksSelectors: {
										...skaBlocksSelectors,
										[selector]: {
											...skaBlocksSelectors[selector],
											...nextAttributes,
										},
									},
								})
							}}
						/>
					</Fragment>
				)
			})}
		</ApplyTailwindContext.Provider>
	)
}

export default SelectorScreens