import React from "react";
import { SpinnerCircular } from "spinners-react";

import { getFile } from "../../../../actions";

export default class RequestFile extends React.Component
{
	constructor(props)
	{
		super(props);
		this.state = {
			downloading: false
		}
	}

	_handle_onDownloadFile = () => 
	{
		const { file } = this.props;
		const { downloading } = this.state;

		if(!downloading)
		{
			this.setState({ downloading: true }, () => 
			{
				getFile({ id: file.doc_url, filename: `${ file.doc_name }.${ file.doc_extension }` })
				.then(() => { this.setState({ downloading: false }); })
				.catch(() => { this.setState({ downloading: false }); });
			});
		}
	}

	render()
	{
		const { file } = this.props;
		const { downloading } = this.state;

		return (
			<div className="row interactive" onClick={ this._handle_onDownloadFile }>
				{ file !== undefined && file !== null && (
					<p className="doc_name i-pdf extension" data-format={ file.doc_extension } style={{ flexDirection: "column", display: "flex", alignItems: "flex-start", }}>
						{ file.doc_name }
						<span style={{ position: "relative", color: downloading ? "#8e94a780" : "#8e94a7", }}>
							Скачать документ { downloading ? (<SpinnerCircular size={ 20 } thickness={ 100 } speed={ 100 } color="rgba(236, 239, 244, 1)" secondaryColor="rgba(28, 1, 169, 1)" style={{ position: "absolute", right: 0, marginRight: "-26px", top: 0, }} />) : null }
						</span>
					</p>
				) }
			</div>
		)
	}
}