import React from "react";
import Dropzone from 'react-dropzone';

const LIMIT = 10000000;
const LIMIT_FILES = 10;

export default class FileDropzone extends React.Component
{
	constructor(props)
	{
		super(props);
		this.state = {};
	}

	render()
	{
		const { files, onAddFile, onDeleteFile } = this.props;

		return (
			<>
				{ files.length > 0 && (
					<div className="column">
						<div className="column_text_block">
							<p><b>Приложенные файлы ({ files.length }/{ LIMIT_FILES })</b></p>
							{ files.map((file, index) => (
								<p key={ index }>{ file.size > LIMIT && (<span style={{ color: "#A8026B", }}>Ошибка, превышен допустимый размер файла в 10 мб.</span>) } { file.name } - { parseFloat(file.size / 1000000).toFixed(file.size < 100000 ? 3 : 2) } мб. <small style={{ color: "#A8026B", textDecoration: "underline", cursor: "pointer" }} onClick={ () => onDeleteFile(file.name) }>[ удалить ]</small></p>
							)) }
						</div>
					</div>
				) }
				<div className="column">
					<div className="column_text_block">
						<p style={{ color: "#999", fontStyle: "italic" }}>Вы можете приложить до 10 файлов, максимальный размер одного файла: 10 мегабайт.</p>
					</div>
				</div>
				{ files.length < LIMIT_FILES && (
					<Dropzone onDrop={ (acceptedFiles) => onAddFile(acceptedFiles) } maxFiles={ LIMIT_FILES }>
						{ ({getRootProps, getInputProps}) => (
							<div className="file_upload dropzone" { ...getRootProps() }>
								<div className="files"></div>
								<div>
									<p data-sm-text="Выберите файлы">
										<span>Перенесите файлы на экран для быстрой загрузки или выберите файл с компьютера </span>
									</p>
									<label htmlFor="" className="button button-blue">Загрузить файл</label>
								</div>
								<input { ...getInputProps() } />
							</div>
						) }
					</Dropzone>
				) }
			</>
		)
	}
}