import { createAdvancedSelectorElement } from '@pdfdraft/core/advanced-selector';
import { Icon } from '@/woocommerce/elements/data-field/icon';
import { queryClient } from '@/woocommerce/elements/data-field/query-client';

import { findMergeTagLabel, getMergeTagOptions } from '@/woocommerce/elements/data-field/utils';
import { QueryClientProvider } from '@tanstack/react-query';
import { __ } from '@wordpress/i18n';

export const woo = createAdvancedSelectorElement({
	namespace: 'woocommerce',
	label: __('Data Field', 'pdfdraft-pdf-invoices-for-woocommerce'),
	category: 'woocommerce',
	icon: Icon,
	keywords: ['woo', 'woocommerce', 'order', 'product'],
	tier: 'free',
	queryClient,
	config: {
		getMergeTagOptions,
		getMergeTagLabel: findMergeTagLabel,
		placeholder: __('Use / for merge tags.', 'pdfdraft-pdf-invoices-for-woocommerce'),
		emptyLabel: __('Use / for merge tags.', 'pdfdraft-pdf-invoices-for-woocommerce'),
		minWidthPx: 64,
		minHeightPx: 24,
	},
	renderWrapper: (children) => (
		<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
	),
	getInitialDimensions: () => ({ width: 160, height: 24 }),
	getInitialContent: () => '',
});
