import React, { Component } from "react";
import Router from "next/router";
import { Row, Col, FormGroup, Button, Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap";
import { addBanding } from "@/actions/banding";
import { connect } from "react-redux";
import { toast } from "react-toastify";

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 ModalPermohonan extends Component {
	constructor(props) {
		super(props);
		this.state = {
			modal1: false,
			files: [],
			error: null,
		};
	}

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

	toggleModal1 = () => {
		this.props.toggleModal(false);
		this.setState({
			modal1: !this.state.modal1,
		});
	};

	onSubmit = async (e) => {
		e.preventDefault();
		const { query, token } = this.props;
		const { id } = query;
		const formdata = new FormData();
		if (this.state.files.length > 0) {
			this.setState({
				modal1: !this.state.modal1,
			});

			this.state.files.forEach((e) => {
				formdata.append("dokumen", e);
			});

			const toastid = toast.loading("Please wait...");
			const added = await addBanding(token, id, formdata);

			if (!added) {
				toast.update(toastid, { render: "All is not good", type: "error", isLoading: false, autoClose: true, closeButton: true });
			} else {
				toast.update(toastid, { render: "All is good", type: "success", isLoading: false, autoClose: true, closeButton: true });
				Router.push({
					pathname: "/pt/jawaban-banding",
				});
			}
		} else {
			this.setState({ error: "Dokumen harus ada" });
		}
	};

	handleKirim = (e) => {
		this.onSubmit(e);
	};

	render() {
		const { files, error } = 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 (
			<>
				<Modal isOpen={this.props.modal} toggle={this.props.toggleModal}>
					<ModalBody>Apakah anda akan mengajukan banding?</ModalBody>
					<ModalFooter>
						<Button color="primary" onClick={this.toggleModal1}>
							Ya
						</Button>{" "}
						<Button color="secondary" onClick={this.props.toggleModal}>
							Tidak
						</Button>
					</ModalFooter>
				</Modal>
				<Modal isOpen={this.state.modal1} toggle={this.toggleModal1}>
					<ModalHeader toggle={this.toggleModal1}>Upload Dokumen Banding</ModalHeader>
					<ModalBody>
						<form className="form-horizontal" method="get" action="/" onSubmit={this.onSubmit}>
							<FormGroup>
								<label>Dalam hal mengajukan permohonan banding maka wajib mengunggah surat permohonan banding & dokumen pendukungnya</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 ${error ? "text-danger" : ""}`}>{error ? error : "Multiple files upload"}</span>
								</div>
							</FormGroup>
						</form>
					</ModalBody>
					<ModalFooter>
						<Button color="primary" onClick={this.handleKirim}>
							Kirim
						</Button>
					</ModalFooter>
				</Modal>
			</>
		);
	}
}

const mapStateToProps = (state) => ({ user: state.user, token: state.token });
export default connect(mapStateToProps)(ModalPermohonan);