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

interface ProductSelectorProps {}

export function ProductSelector(props: ProductSelectorProps) {
	const [productOptions] = useState(getProductFields());
	const [selectedProduct, setSelectedProduct] =
		useState<string>('select_a_product');

	const { products, initializeProductPricingLevels } = useBoundStore(
		(state) => ({
			products: state.products,
			initializeProductPricingLevels:
				state.initializeProductPricingLevels,
		})
	);

	const productIsAlreadySelected = (productId: number) => {
		if (!products) {
			return false;
		}

		return products.some((product) => {
			return (
				product.id === productId && Array.isArray(product.pricingLevels)
			);
		});
	};

	const handleSelectChange: React.ChangeEventHandler<HTMLSelectElement> = (
		event
	) => {
		const val = event.currentTarget.value;
		initializeProductPricingLevels(val);
	};

	return (
		<select
			className="gw-conditional-pricing-product-select"
			onChange={handleSelectChange}
			value={selectedProduct}
		>
			<option value="select_a_product">
				{__('Select a Product', 'gp-conditional-pricing')}
			</option>
			{productOptions.map((productOption) => (
				<option
					key={productOption.id}
					value={productOption.id}
					disabled={productIsAlreadySelected(productOption.id)}
				>
					{productOption.label}
				</option>
			))}
		</select>
	);
}