import { useBoundStore } from '../../store/store';
import { exportPricingLevels } from '../../fetching/export-pricing-levels';
import { triggerFileDownload } from '../../utilities';
import Tooltip from '../tooltip';
import { __ } from '@wordpress/i18n';

const { gp_conditional_pricing_form_settings_strings: strings } = window;

interface ExportPricingLevelsButtonProps {}

export function ExportPricingLevelsButton(
	props: ExportPricingLevelsButtonProps
) {
	const { products } = useBoundStore((state) => ({
		products: state.products,
	}));

	return (
		<button
			id="gpcp-export"
			className="button button-secondary large"
			disabled={!strings.supports_csvs}
			onClick={async (event: React.MouseEvent<HTMLButtonElement>) => {
				event.preventDefault();

				if (!strings.supports_csvs) {
					return;
				}

				if (!products?.length) {
					return;
				}

				const data = await exportPricingLevels(products);
				triggerFileDownload(data.export_file_url);
			}}
		>
			{__('Export Pricing', 'gp-conditional-pricing')}
			{!strings.supports_csvs && (
				<Tooltip
					content={__(
						'Exporting requires PHP 7.4+ and the mbstring extension.',
						'gp-conditional-pricing'
					)}
				/>
			)}
		</button>
	);
}