import React, { Component } from "react";
import Router from "next/router";
import Link from "next/link";
import { getOneSanksi } from "@/actions/sanksi";
import Header from "@/components/Main/Header";
import DetailPT from "@/components/Main/DetailPT";
import DetailSanksi from "@/components/Main/DetailSanksi";
import Riwayat from "@/components/PencabutanSanksi/Riwayat";
import ContentWrapper from "@/components/Layout/ContentWrapper";
import { Row, Col, Card, CardBody, FormGroup, Button } from "reactstrap";
import { addCabutSanksi } from "@/actions/cabutSanksi";
import { connect } from "react-redux";
import Loader from "@/components/Common/Loader";
import { toast } from "react-toastify";
import { Formik, Form, Field, ErrorMessage } from "formik";
import * as Yup from "yup";

const docSchema = Yup.object().shape({
	dokumen: Yup.array().min(1).required("Required"),
});
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;
	}
}

class DetailPencabutanSanksi extends Component {
	constructor(props) {
		super(props);
		this.state = {
			files: [],
			sanksi: {},
			pt: null,
			error: null,
		};
	}

	static async getInitialProps({ query }) {
		return { query };
	}

	componentDidMount = async () => {
		const { token, query } = this.props;
		const sanksi = await getOneSanksi(token, query.id);
		this.setState({ sanksi, pt: sanksi.data.laporan.pt });
	};

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

	handleKirim = async (data) => {
		const { user, query, token } = this.props;
		const formdata = new FormData();
		data.dokumen.forEach((e) => {
			formdata.append("dokumen", e);
		});
		const id = toast.loading("Please wait...");
		const added = await addCabutSanksi(token, query.id, formdata);
		if (!added) {
			toast.update(id, { render: "All is not good", type: "error", isLoading: false, autoClose: true, closeButton: true });
		} else {
			toast.update(id, { render: "All is good", type: "success", isLoading: false, autoClose: true, closeButton: true });
			Router.push({
				pathname: "/pt/jawaban-pencabutan-sanksi",
			});
		}
	};

	render() {
		const { files, sanksi, pt } = 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 (
			<ContentWrapper unwrap>
				{pt && <Header data={pt} />}
				<div className="p-3">
					<div className="content-heading">
						<div>Permohonan Pencabutan Sanksi</div>
						<div className="ml-auto">
							<Link href="/pt/pencabutan-sanksi">
								<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
							</Link>
						</div>
					</div>
					<Row>
						{sanksi.data ? (
							<Col xl="9">
								<Card className="card-default">
									<CardBody>
										<Row>
											<Col lg={12}>
												<DetailSanksi data={sanksi.data} />
												<p className="lead bb">Permohonan Pencabutan Sanksi</p>
												<Formik
													initialValues={{
														dokumen: [],
													}}
													validationSchema={docSchema}
													onSubmit={this.handleKirim}
												>
													{() => (
														<Form className="form-horizontal">
															<FormGroup>
																<label className="row-form-label">Upload Dokumen:</label>
																<div className="row-md-10">
																	<Field name="dokumen">
																		{({ field, form }) => (
																			<DropzoneWrapper
																				className=""
																				onDrop={(e) => {
																					this.onDrop(e);
																					form.setFieldValue(field.name, e);
																				}}
																			>
																				{({ 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>
																		)}
																	</Field>
																	<ErrorMessage name="dokumen" component="div" className="form-text text-danger" />
																</div>
															</FormGroup>
															<FormGroup>
																<div className="row-xl-10">
																	<Button color="primary" disabled={sanksi.data?.pengajuan?.cabut_sanksi || false} type="submit">
																		Kirim
																	</Button>
																</div>
															</FormGroup>
														</Form>
													)}
												</Formik>
											</Col>
										</Row>
									</CardBody>
								</Card>
							</Col>
						) : (
							<Loader />
						)}
						<Col xl="3">{pt && <DetailPT data={pt} />}</Col>
					</Row>
					{sanksi.data && (
						<Row>
							<Col>
								<Riwayat data={sanksi.data?.pengajuan?.cabut_sanksi || null} />
							</Col>
						</Row>
					)}
				</div>
			</ContentWrapper>
		);
	}
}

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