/**
 * External dependencies
 */
import { __, sprintf } from '@wordpress/i18n';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import {
	useInnerBlockLayoutContext,
	useProductDataContext,
} from '@woocommerce/shared-context';
import { withProductDataContext } from '@woocommerce/shared-hocs';

/**
 * Internal dependencies
 */
import './style.scss';
import {
	useColorProps,
	useTypographyProps,
} from '../../../../hooks/style-attributes';

/**
 * Product Stock Indicator Block Component.
 *
 * @param {Object} props             Incoming props.
 * @param {string} [props.className] CSS Class name for the component.
 * @return {*} The component.
 */
const Block = ( props ) => {
	const { className } = props;
	const { parentClassName } = useInnerBlockLayoutContext();
	const { product } = useProductDataContext();
	const colorProps = useColorProps( props );
	const typographyProps = useTypographyProps( props );

	if ( ! product.id || ! product.is_purchasable ) {
		return null;
	}

	const inStock = !! product.is_in_stock;
	const lowStock = product.low_stock_remaining;
	const isBackordered = product.is_on_backorder;

	return (
		<div
			className={ classnames(
				className,
				colorProps.className,
				'wc-block-components-product-stock-indicator',
				{
					[ `${ parentClassName }__stock-indicator` ]: parentClassName,
					'wc-block-components-product-stock-indicator--in-stock': inStock,
					'wc-block-components-product-stock-indicator--out-of-stock': ! inStock,
					'wc-block-components-product-stock-indicator--low-stock': !! lowStock,
					'wc-block-components-product-stock-indicator--available-on-backorder': !! isBackordered,
				}
			) }
			style={ { ...colorProps.style, ...typographyProps.style } }
		>
			{ lowStock
				? lowStockText( lowStock )
				: stockText( inStock, isBackordered ) }
		</div>
	);
};

const lowStockText = ( lowStock ) => {
	return sprintf(
		/* translators: %d stock amount (number of items in stock for product) */
		__( '%d left in stock', 'woocommerce' ),
		lowStock
	);
};

const stockText = ( inStock, isBackordered ) => {
	if ( isBackordered ) {
		return __( 'Available on backorder', 'woocommerce' );
	}

	return inStock
		? __( 'In Stock', 'woocommerce' )
		: __( 'Out of Stock', 'woocommerce' );
};

Block.propTypes = {
	className: PropTypes.string,
};

export default withProductDataContext( Block );
