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

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

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

import Radio, {RadioTabsOption} from '../radio'

import AddVariant from './AddVariant'
import EditVariants from './EditVariants'

import {
	VARIANT_DEFAULT_STATE,
	TailwindFeatureVariants,
	sanitizeVariant,
} from '../../attributes'

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

import './style.scss'

interface RenderVariantProps {
	id: keyof TailwindFeatureVariants
	render: (id: keyof TailwindFeatureVariants) => React.ReactNode
}

const RenderVariant: React.FC<RenderVariantProps> = ({
	id,
	render,
}) => {
	return (
		<div className='ska-blocks__with-variants__wrapper'>
			{render(id)}
		</div>
	)
}

const getFirstNonEmptyVariant = (variants: TailwindFeatureVariants) => {

	for(const variant of Object.keys(variants)) {
		if(Object.values(variants[variant]).filter(v => v).length > 0) {
			return variant
		}
	}

	return VARIANT_DEFAULT_STATE
}

export interface WithVariantsProps {
	id: TailwindFeature['id']
	variants: TailwindFeatureVariants
	dispatch: SkaBlocksActionTypes
	children: (variant: keyof TailwindFeatureVariants) => React.ReactNode
}

const VARIANT_SETTINGS_TAB = 'variant-settings-tab'

const WithVariants: React.FC<WithVariantsProps> = ({
	id,
	variants = {},
	dispatch,
	children,
}) => {

	const [activeTab, setActiveTab] = useState<string>(getFirstNonEmptyVariant(variants))

	const variantNames = [VARIANT_DEFAULT_STATE].concat(Object.keys(variants).filter(v => v !== VARIANT_DEFAULT_STATE))
	const variantTabs: RadioTabsOption[] = variantNames.map(variant => ({
		label: variant === VARIANT_DEFAULT_STATE ? _x('Default', 'Label for "default state" variant', 'ska-blocks') : variant,
		value: variant,
		content: <RenderVariant id={variant} render={children} />,
	}))

	const settingsTab: RadioTabsOption = {
		label: '+',
		tooltip: __('Add or edit variants', 'ska-blocks'),
		value: VARIANT_SETTINGS_TAB,
		content: (
			<VStack>
				<EditVariants
					id={id}
					currentVariants={variants}
					dispatch={dispatch}
				/>
				<AddVariant
					currentVariants={variants}
					onAdd={(variant, defaultValue) => dispatch.addVariant({feature: id, variant, defaultValue})}
					setActiveVariant={setActiveTab}
				/>
			</VStack>
		),
	}

	return (
		<BaseControl
			id={`ska-blocks__with-variants--${id}`}
			className='ska-blocks__with-variants'
			__nextHasNoMarginBottom
		>
			<Radio.Tabs
				className='ska-blocks__with-variants__tabs'
				type='variants'
				label={_x('Variant', 'with-variants', 'ska-blocks')}
				hideLabelFromVision
				isSmall
				value={activeTab || (variantTabs.length > 0 ? variantTabs[0].value : '')}
				arbitraryValues={variantNames}
				supports={{
					bare: true,
					arbitrary: false,
				}}
				onChange={setActiveTab}
				options={variantTabs.concat(settingsTab)}
				onAdd={value => {
					dispatch.addVariant({feature: id, variant: value})
					if(sanitizeVariant(value)) {
						setActiveTab(sanitizeVariant(value))
					}
				}}
				onUpdate={(nextValue, prevValue) => {
					dispatch.updateVariant({feature: id, variant: prevValue, nextVariant: nextValue})
					if(sanitizeVariant(nextValue)) {
						setActiveTab(sanitizeVariant(nextValue))
					}
				}}
				onRemove={removedValue => dispatch.removeVariant({feature: id, variant: removedValue})}
			/>
		</BaseControl>
	)
}

export default WithVariants