import Dropzone from 'react-dropzone';
import FileDropzone from "../FileDropzone";
import moment from "moment";

const LIMIT = 10000000;
const LIMIT_FILES = 10;

export default class FileDropzoneDeals extends FileDropzone
{
	render()
	{
		const { files, onAddFile, onDeleteFile, } = this.props;

		return (
			<>
				{ files.length > 0 && (
					<div className="horizontal_dropzone_files">
						{ files.map((file, index) => (
							<div className="file" key={ index }>
								<div className="delete" onClick={ () => onDeleteFile(file) }>
									<div className="icon"></div>
								</div>
								<div className="doc_icon">
									<span className="extension">PDF</span>
								</div>
								<div className="title">
									<span>{ file.name }</span>
									<span>{ moment().format("DD.MM.YYYY") }</span>
								</div>
							</div>
						)) }
						{/*}
							<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>
				) }
				{ files.length < LIMIT_FILES && (
					<Dropzone onDrop={ (acceptedFiles) => onAddFile(acceptedFiles) } maxFiles={ LIMIT_FILES }>
						{ ({getRootProps, getInputProps}) => (
							<div className={`file_upload dropzone horizontal_dropzone_wrapper`} { ...getRootProps() }>
								<div className={`files`}></div>
								<div className={`horizontal_dropzone_inner`}>
									<p data-sm-text="Выберите файлы">
										<span>Перенесите файлы на экран для быстрой загрузки или выберите файл с компьютера </span>
									</p>
									<label htmlFor="" className="button button-blue">Загрузить файл</label>
								</div>
								<input { ...getInputProps() } />
							</div>
						) }
					</Dropzone>
				) }
			</>
		)
	}
}