import React, { Component } from "react";
import { Row, Col, Input, FormGroup } from "reactstrap";

let Dropzone = null;
class DropzoneWrapper extends Component {
	state = {
		isClient: false,
	};
	componentDidMount = () => {
		Dropzone = require("react-dropzone").default;
		this.setState({ isClient: true });
	};
	render() {
		return Dropzone ? <Dropzone {...this.props}>{this.props.children}</Dropzone> : null;
	}
}

export class UploadSurat extends Component {
	constructor(props) {
		super(props);
		this.state = {
			files: [],
			nomorSanksi: "",
			keterangan: "",
		};
	}

	onDrop = (files) => {
		this.setState({
			files: files.map((file) =>
				Object.assign(file, {
					preview: URL.createObjectURL(file),
				})
			),
			stat: "Added " + files.length + " file(s)",
		});
	};

	uploadFiles = (e) => {
		e.preventDefault();
		e.stopPropagation();
		this.setState({
			stat: this.state.files.length ? "Dropzone ready to upload " + this.state.files.length + " file(s)" : "No files added.",
		});
	};

	clearFiles = (e) => {
		e.preventDefault();
		e.stopPropagation();
		this.setState({
			stat: this.state.files.length ? this.state.files.length + " file(s) cleared." : "No files to clear.",
		});
		this.setState({
			files: [],
		});
	};

	setNomorSanksi = (e) => {
		this.setState({ nomorSanksi: e.target.value });
	};

	setKeterangan = (e) => {
		this.setState({ keterangan: e.target.value });
	};

	render() {
		const { files } = this.state;

		const thumbs = files.map((file, index) => (
			<Col md={3} key={index}>
				<img className="img-fluid mb-2" src={file.preview} alt="Item" />
			</Col>
		));
		return (
			<form className="form-horizontal" method="get" action="/" onSubmit={this.onSubmit}>
				<FormGroup row>
					<label className="col-md-2 col-form-label">Nomor Surat:</label>
					<div className="col-md-10">
						<Input type="text" value={this.state.nomorSanksi} onChange={this.setNomorSanksi} />
					</div>
				</FormGroup>
				<FormGroup row>
					<label className="col-md-2 col-form-label">Keterangan</label>
					<div className="col-md-10">
						<Input type="text" value={this.state.keterangan} onChange={this.setKeterangan} />
					</div>
				</FormGroup>
				<FormGroup row>
					<label className="col-md-2 col-form-label">Dokumen Surat Sanksi:</label>
					<div className="col-md-10">
						<DropzoneWrapper className="" onDrop={this.onDrop}>
							{({ getRootProps, getInputProps, isDragActive }) => {
								return (
									<div {...getRootProps()} className={"dropzone card p-3 " + (isDragActive ? "dropzone-drag-active" : "")}>
										<input {...getInputProps()} />
										<div className="dropzone-previews flex">{this.state.files.length > 0 ? <Row>{thumbs}</Row> : <div className="text-center dz-default dz-message">Drop files here to upload</div>}</div>
										<div className="d-flex align-items-center">
											<small className="ml-auto">
												<button type="button" className="btn btn-link" onClick={this.clearFiles}>
													Clear files
												</button>
											</small>
										</div>
									</div>
								);
							}}
						</DropzoneWrapper>
						<span className="form-text">Multiple files upload</span>
					</div>
				</FormGroup>
			</form>
		);
	}
}

export default UploadSurat;