import React, { useCallback, useMemo, useEffect, useState } from 'react';
import { MenuItem } from '@blueprintjs/core';
import ListSelect from 'components/ListSelect';
import { FormattedMessage as T } from 'react-intl';
function EstimateListField({
products,
initialProductId,
selectedProductId,
defautlSelectText = ,
onProductSelected,
}) {
const initialProduct = useMemo(
() => products.find((a) => a.id === initialProductId),
[initialProductId],
);
const [selectedProduct, setSelectedProduct] = useState(
initialProduct || null,
);
useEffect(() => {
if (typeof selectedProductId !== 'undefined') {
const product = selectedProductId
? products.find((a) => a.id === selectedProductId)
: null;
setSelectedProduct(product);
}
}, [selectedProductId, products, setSelectedProduct]);
const onProductSelect = useCallback(
(product) => {
setSelectedProduct({ ...product });
onProductSelected && onProductSelected(product);
},
[onProductSelected],
);
const productRenderer = useCallback(
(item, { handleClick }) => (
),
[],
);
const filterProduct = useCallback((query, product, _index, exactMatch) => {
const normalizedTitle = product.name.toLowerCase();
const normalizedQuery = query.toLowerCase();
if (exactMatch) {
return normalizedTitle === normalizedQuery;
} else {
return normalizedTitle.indexOf(normalizedQuery) >= 0;
}
}, []);
return (
}
itemRenderer={productRenderer}
itemPredicate={filterProduct}
popoverProps={{ minimal: true }}
onItemSelect={onProductSelect}
selectedItem={`${selectedProductId}`}
selectedItemProp={'id'}
labelProp={'name'}
defaultText={selectedProduct ? selectedProduct.name : defautlSelectText}
/>
);
}
export default EstimateListField;