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

import {
	ToggleControl,
	withFilters,
} from '@wordpress/components'

import {
	WithTooltip,
} from '@ska/components'

import type {
	TailwindAttributes,
} from '../../types'

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

export type AdvancedInspectorControlsProps = tBlockEditProps<TailwindAttributes>

/**
 * This component renders AdvancedInspectorControls for a block that supports Tailwind.
 */
const AdvancedInspectorControls: React.FC<AdvancedInspectorControlsProps> = ({
	attributes,
	setAttributes,
}) => {

	const {
		skaBlocks = {},
	} = attributes

	const {
		sb = true,
		...restSkaBlocks
	} = skaBlocks

	return <>
		<WithTooltip
			label={__('View help', 'ska-blocks')}
			tooltip={__(`By default the generated CSS applies to the current block or its' descendants to keep it from affecting other blocks. Manually disable this option when using classes such as "[body:has(&)]" or "group-hover:*" that can't be sandboxed via native CSS nesting.`, 'ska-blocks')}
		>
			<ToggleControl
				label={__('Sandbox Tailwind CSS', 'ska-blocks')}
				checked={sb}
				onChange={() => setAttributes({skaBlocks: {...restSkaBlocks, ...(sb && {sb: !sb})}})}
				__nextHasNoMarginBottom
			/>
		</WithTooltip>
	</>
}

export default withFilters('ska.blocks.AdvancedInspectorControls')(AdvancedInspectorControls) as any as typeof AdvancedInspectorControls