/* eslint-disable jsx-a11y/tabindex-no-positive */
import * as React from 'react'
import {__, _x, sprintf} from '@wordpress/i18n'

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

import {
	__experimentalHStack as HStack,
	__experimentalVStack as VStack,
} from '@wordpress/components'

import {
	trash as trashIcon,
} from '@wordpress/icons'

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

import {
	Controls,
	WithVariants,
	TailwindFeatureContext,
	TailwindFeatureClassNamesContext,
} from '.'

import {
	useCopyTailwindClasses,
} from '../hooks'

import {
	ATTRIBUTE_TYPE,
	ATTRIBUTE_VARIANTS,
	VARIANT_DEFAULT_STATE,
	ATTRIBUTE_ARBITRARY_VALUES,
} from '../attributes'

import type {
	TailwindFeatureVariants,
	SkaBlocksActionTypes,
} from '../../types'

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

export interface FeatureInspectorControlsProps {
	attributes: tBlockAttributes
	dispatch: SkaBlocksActionTypes
}

/**
 * This component functions as an interface between block attributes and controls.
 */
const FeatureInspectorControls: React.FC<FeatureInspectorControlsProps> = props => {

	const {
		id,
		label,
		supports,
		schema,
	} = useContext(TailwindFeatureContext)

	const {
		classNames = '',
	} = useContext(TailwindFeatureClassNamesContext)

	const {
		attributes = {},
		dispatch,
	} = props

	const {
		[id]: value = {},
	} = attributes

	const {
		[ATTRIBUTE_TYPE]: type = 'default',
		[ATTRIBUTE_VARIANTS]: variants = {},
		[ATTRIBUTE_ARBITRARY_VALUES]: arbitraryValues = [],
	} = value

	const {ref: copyRef, label: copyLabel, icon: CopyIcon} = useCopyTailwindClasses(classNames)
	// @ts-ignore
	const copyIcon = <CopyIcon style={{transform: 'scale(0.8)'}} />

	const RenderControls: React.FC<{variant: keyof TailwindFeatureVariants}> = ({variant}) => {
		return <>{schema.map(({key, options: controls}) => {

			if(type !== key) {
				return null
			}

			return controls.map(({key, label, type: controlType = 'default'}) => {

				const {
					[key]: variantValue = '',
				} = variants[variant] || {}

				return (
					<Controls
						key={key}
						type={controlType}
						supports={supports}
						label={label}
						controls={controls}
						variant={variant}
						valueKey={key}
						value={variantValue}
						arbitraryValues={arbitraryValues}
						dispatch={dispatch}
					/>
				)
			})
		})}</>
	}

	return (
		<div className='ska-blocks__tailwind-inspector-controls__feature'>
			<HStack className='ska-blocks__tailwind-inspector-controls__feature__header' alignment='center' justify='end'>
				<h3>{label}</h3>
				<JsonView
					id={id}
					label={sprintf(__(`View "%s" configuration`, 'ska-blocks'), label)}
					size='small'
					tabIndex={2}
					value={() => ({tailwindClasses: classNames, value})}
				/>
				{!!classNames && (
					<Button
						variant='link'
						size='small'
						icon={copyIcon}
						label={copyLabel}
						ref={copyRef}
						tabIndex={2}
					/>
				)}
				<Button
					variant='link'
					size='small'
					isDestructive
					icon={trashIcon}
					label={sprintf(__(`Remove "%s" from the block`, 'ska-blocks'), label)}
					onClick={() => dispatch.resetFeature(id)}
					tabIndex={2}
				/>
			</HStack>
			<VStack className='ska-blocks__tailwind-inspector-controls__feature__content'>
				{schema.length > 1 && (
					<ButtonGroup.Radio
						fluid
						label={__('Type', 'ska-blocks')}
						hideLabelFromVision
						onChange={value => dispatch.setFeatureType({feature: id, type: value})}
						options={schema.map(({key, label = ''}) => ({label, value: key}))}
						value={type}
					/>
				)}
				{supports.variants ? (
					<WithVariants
						id={id}
						variants={variants}
						dispatch={dispatch}
						children={variant => <RenderControls variant={variant} />}
					/>
				) : <RenderControls variant={VARIANT_DEFAULT_STATE} />}
			</VStack>
		</div>
	)
}

export default FeatureInspectorControls