import Dropzone from 'react-dropzone';
import FileDropzone from "../FileDropzone";
import moment from "moment";
import { SpinnerCircular } from 'spinners-react';

const LIMIT = 10000000;
const LIMIT_FILES = 10;

export default class FileDropzoneDeals extends FileDropzone
{
	componentDidMount()
	{
		console.log("FileDropzoneDeals", "CDM");
	}

	render()
	{
		const { uploaded, onAddFile, onDeleteFile, uploading, document, } = this.props;
		console.log("FileDropzoneDeals", { uploaded, document });

		return (
			<>
				{ uploaded.files.length > 0 && (
					<div className="horizontal_dropzone_files_wrapper">
						{ document.comment !== null && document.comment !== "" && (
							<div className="horizontal_dropzone_files_item horizontal_dropzone_files_error">
								<p className="horizontal_dropzone_files_comment">
									<span>{ document.check }</span>
									<span>{ document.comment }</span>
								</p>
							</div>
						) }
						<div className="horizontal_dropzone_files horizontal_dropzone_files_item">
							{ uploaded.files.map((file, index) => 
							{
								return (
									<div className="file" key={ index }>
										{ file.sent ? (
											<div className="delete" onClick={ () => onDeleteFile(file.group, index) }>
												<div className="icon"></div>
											</div>
										) : (
											<div className="loading">
												<SpinnerCircular size={ 22 } thickness={ 100 } speed={ 100 } color="rgba(255, 255, 255, 1)" secondaryColor="rgba(168, 2, 107, 0.5)" style={{ marginTop: "8px" }}/>
											</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>
								) 
							} ) }
						</div>
					</div>
				) }
				{ uploaded.files.length < LIMIT_FILES && (
					<Dropzone onDrop={ (acceptedFiles) => onAddFile(acceptedFiles, document.comment !== null && document.comment !== "" ? true : false) } maxFiles={ LIMIT_FILES } multiple={ true } disabled={ uploading }>
						{ ({getRootProps, getInputProps}) => (
							<div className={`file_upload dropzone horizontal_dropzone_wrapper ${ uploading ? "disabled" : "" }`} { ...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>
				) }
			</>
		)
	}
}