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
{
	constructor(props)
	{
		super(props);
		this.state = {
			message: true, 
		};
	}

	componentDidMount()
	{
	}

	_handle_onToggleShowMessage = () => 
	{
		this.setState({ message: this.state.message ? false : true });
	}

	render()
	{
		const { uploaded, onAddFile, onDeleteFile, uploading, document, statuscode_id, } = this.props;
		const { message } = this.state;

		let show_comment = false;
		if(document.comment !== null && document.comment !== "")
		{
			show_comment = true;
		}
		
		return (
			<>
				{ show_comment && (
					<div className="horizontal_dropzone_files_item horizontal_dropzone_files_error">
						{ message ? (
							<p className="horizontal_dropzone_files_comment">
								<span className="title">{ document.check }</span>
								<span>{ document.comment }</span>
							</p>
						) : (
							<p className={`horizontal_dropzone_files_comment ${ !message ? "closed" : "" }`}>
								<span>Комментарий к ранее загруженным файлам</span>
							</p>
						) }
						<div className={`switch ${ !message ? "up" : "" }`} onClick={ this._handle_onToggleShowMessage }></div>
					</div>
				) }
				{ statuscode_id === 102 && (
					<>
						{ uploaded.files.length > 0 && (
							<div className="horizontal_dropzone_files_wrapper">
								<div className="horizontal_dropzone_files horizontal_dropzone_files_item">
									{ uploaded.files.map((file, index) => 
									{
										return (
											<div className="file" key={ index }>
												{ file.uploaded ? (
													<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>
						) }
					</>
				) }
			</>
		)
	}
}