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

import {
	registerBlockVariation,
	unregisterBlockVariation,
	// @ts-expect-error
} from '@wordpress/blocks'

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

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

import {
	useVariations,
} from '..'

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

const VariationsLoader: React.FC = () => {

	const variations = useVariations()

	useEffect(() => {

		Object.entries(variations).forEach(([slug, value]) => {

			const {
				title = '',
				description = '',
				block = '',
				variation: variationJson = '{}',
			} = value

			const variation = parseJson(variationJson) as tBlockVariation

			const blockVariation: tBlockVariation = {
				...variation,
				title,
				description,
				name: `ska-variation--${slug}`,
				attributes: {
					...variation.attributes,
					skaBlocksVariation: slug,
				},
				isActive: (blockAttributes: tBlockAttributes, variationAttributes: tBlockAttributes) => {
					return blockAttributes.skaBlocksVariation === variationAttributes.skaBlocksVariation
				},
			}

			registerBlockVariation(block, blockVariation)
		})

		return () => {
			Object.entries(variations).forEach(([slug, {block}]) => {
				unregisterBlockVariation(block, `ska-variation--${slug}`)
			})
		}
	}, [variations])

	return null
}

export default VariationsLoader