import React from 'react';
import { __ } from '@wordpress/i18n';
import { QueryClientProvider } from '@tanstack/react-query';
import { queryClient } from '../data-field/query-client';

import { ProductTable } from './render/ProductTable';
import { Icon } from './icon';
import { PRODUCT_TABLE_NAMESPACE } from './constants/types';
import { productTableToHTML } from './toHTML';

export const productTable = {
	namespace: PRODUCT_TABLE_NAMESPACE,
	label: __('Product Table', 'pdfdraft-pdf-invoices-for-woocommerce'),
	category: 'woocommerce',
	icon: Icon,
	keywords: ['product', 'table', 'woocommerce', 'cart', 'items'],
	tier: 'free',
	render: ProductTable,
	toHTML: productTableToHTML as any,
	getInitialDimensions: () => ({ width: 280, height: 150 }),
	getInitialContent: () => '',
	renderWrapper: (children: React.ReactNode) => (
		<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
	),
} as any;

