import React from 'react';
import { CreditAmount } from 'component/common';

class FilePrice extends React.Component {
	componentWillMount() {
		this.fetchCost(this.props);
	}

	componentWillReceiveProps(nextProps) {
		this.fetchCost(nextProps);
	}

	fetchCost(props) {
		const { costInfo, fetchCostInfo, uri, fetching } = props;

		if (costInfo === undefined && !fetching) {
			fetchCostInfo(uri);
		}
	}

	render() {
		const { costInfo, look = 'indicator' } = this.props;

		const isEstimate = costInfo ? !costInfo.includesData : null;

		if (!costInfo) {
			return (
				<span className={`credit-amount credit-amount--${look}`}>???</span>
			);
		}

		return (
			<CreditAmount
				label={false}
				amount={costInfo.cost}
				isEstimate={isEstimate}
				showFree={true}
			/>
		);
	}
}

export default FilePrice;