import { useState } from 'react';
import { useBoundStore } from '../../store/store';
import { __ } from '@wordpress/i18n';

interface SaveConditionalPricingButtonProps {}

export function SaveConditionalPricingButton(
	props: SaveConditionalPricingButtonProps
) {
	const [isSaving, setIsSaving] = useState(false);
	const { hasUnsavedChanges, products, savePricingLogic } = useBoundStore(
		(state) => ({
			hasUnsavedChanges: state.hasUnsavedChanges,
			products: state.products,
			savePricingLogic: state.savePricingLogic,
		})
	);

	const handleSaveClick = async () => {
		setIsSaving(true);
		await savePricingLogic(products ?? []);
		setIsSaving(false);
	};

	let buttonText = __('Save Pricing', 'gp-conditional-pricing');
	if (isSaving) {
		buttonText = 'Saving...';
	} else if (hasUnsavedChanges) {
		buttonText += ' *';
	}

	return (
		<input
			type="submit"
			id="gw-save-conditional-pricing"
			className="gw-save-conditional-pricing button button-primary primary large"
			value={buttonText}
			onClick={handleSaveClick}
			disabled={!hasUnsavedChanges || isSaving}
		/>
	);
}