import React, { Component } from "react";
import { insertPemeriksaan } from "@/actions/pemeriksaan";
import Router from "next/router";
import Datetime from "react-datetime";
import moment from "moment";
import { Row, Col, FormGroup, Input } from "reactstrap";

const selectInstanceId = 1;
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 default class InputEvaluasi extends Component {
	constructor(props) {
		super(props);
		this.state = {
			dropdownOpen: false,
			splitButtonOpen: false,
			judulEvaluasi: "",
			tanggal: moment().format("D MMMM YYYY"),
			files: [],
		};
	}

	setjudulEvaluasi = (e) => {
		this.setState({ judulEvaluasi: e.target.value });
	};

	setTanggal = (moment) => {
		this.setState({ tanggal: moment.format("D MMMM YYYY") });
	};

	toggleSplit = () => {
		this.setState({
			splitButtonOpen: !this.state.splitButtonOpen,
		});
	};

	toggleDropDown = () => {
		this.setState({
			dropdownOpen: !this.state.dropdownOpen,
		});
	};

	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: [],
		});
	};

	onSubmit = async (e) => {
		e.preventDefault();
		const { number, ptId } = this.props.query;
		const formdata = new FormData();
		formdata.append("title", this.state.judulEvaluasi);
		formdata.append("date", this.state.tanggal);
		if (this.state.files.length > 0) {
			this.state.files.forEach((e) => {
				formdata.append("files", e);
			});
		}

		const inserted = await insertPemeriksaan({ number, ptId }, formdata);
		if (inserted) {
			Router.push({
				pathname: "/app/pemeriksaan",
			});
		}
	};

	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 (
			<>
				<p className="lead bb">Evaluasi</p>
				<form className="form-horizontal" method="get" action="/" onSubmit={this.onSubmit}>
					<FormGroup>
						<label>Tanggal Dokumen:</label>
						<div>
							<Datetime inputProps={{ className: "form-control" }} value={this.state.tanggal} onChange={this.setTanggal} />
							{/* <span className="form-text">Tanggal</span> */}
						</div>
					</FormGroup>
					<FormGroup>
						<label>Judul Dokumen:</label>
						<div>
							<Input type="text" value={this.state.judulEvaluasi} onChange={this.setjudulEvaluasi} />
							{/* <Input type="textarea" value={this.state.keteranganLaporan} onChange={this.setKeteranganPelaporan} /> */}
							{/* <span className="form-text">Deskripsi pelaporan minimum karakter 50 maksimum 200 karakter</span> */}
						</div>
					</FormGroup>
					<FormGroup>
						<label>Upload File Pendukung:</label>
						<div>
							<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>
					<FormGroup>
						<div>
							<button className="btn btn-sm btn-primary" type="submit">
								Simpan Evaluasi
							</button>
						</div>
					</FormGroup>
				</form>
			</>
		);
	}
}