import React, { Component } from "react";
import { Row, Col, Card, CardBody, FormGroup, Input, Button, Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap";
import Router from "next/router";
import classnames from "classnames";
import ContentWrapper from "@/components/Layout/ContentWrapper";
import DetailSanksi from "@/components/RekomendasiDelegasi/DetailSanksi";
import TableRiwayat from "@/components/RekomendasiDelegasi/TableRiwayat";
import Header from "@/components/Main/Header";
import Link from "next/link";
import DetailPT from "@/components/Main/DetailPT";
import { getPelaporan } from "@/actions/pelaporan";
import { getOneSanksi } from "@/actions/sanksi";
import Loader from "@/components/Common/Loader";
import { connect } from "react-redux";
import { Formik, Form, Field, ErrorMessage } from "formik";
import * as Yup from "yup";
import { createLog } from "@/actions/log";

const stepNavitemStyle = {
	backgroundColor: "#fcfcfc",
};
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;
	}
}

const selectInstanceId = 1;

const checkIfFilesAreTooBig = (files) => {
	let valid = true;
	if (files) {
		files.map((file) => {
			if (file.size > 15 * 1024 * 1024) {
				valid = false;
			}
		});
	}
	return valid;
};

const checkIfFilesAreCorrectType = (files) => {
	let valid = true;
	if (files) {
		files.map((file) => {
			if (!["image/jpeg", "image/png"].includes(file.type)) {
				valid = false;
			}
		});
	}
	return valid;
};
const rekomendasiSchema = Yup.object().shape({
	dokumen: Yup.array().notRequired().test("filesize", "Maksimal ukuran dokumen 15mb", checkIfFilesAreTooBig),
});

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

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

	componentDidMount = async () => {
		const { query, token } = this.props;
		const idSanksi = query.id;
		const sanksi = await getOneSanksi(token, idSanksi, { all: true });
		const pt = sanksi.data.laporan.pt;
		this.setState({ sanksi, pt });
		console.log(this.state.sanksi)
	};
	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: [],
		});
	};

	handelSimpan = async () => {
		const { data } = this.state;
		const { query, token } = this.props;
		const { id } = query;
		const formdata = new FormData();
		data.dokumen.forEach((e) => {
			formdata.append("dokumen", e);
		});
		const toastid = toast.loading("Please wait...");
		const added = await addJawabanKeberatan(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: "/app/rekomendasi-delegasi",
			});
		}
	};

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

		const thumbs = files.map((file, index) => (
			<div md={3} key={index}>
				{/* <img className="img-fluid mb-2" src={file.preview} alt="Item" /> */}
				<span className="text-left">{index + 1}.{file.name}</span>
			</div>
		));

		return (
			<ContentWrapper unwrap>
				{/* <Header /> */}
				<div className="p-3">
					<div className="content-heading">
						<span className="font-color-white">
							Rekomendasi Delegasi
						</span>
						<div className="ml-auto">
							<Link href="/app/sanksi">
								<Button className="color-3e3a8e" color>
									<span className="font-color-white">
										&lt; Kembali
									</span>
								</Button>
							</Link>
						</div>
					</div>
					{sanksi.data && (
						<Row>
							<Col xl={9}>
								<DetailSanksi data={sanksi.data} />
								<Card>
									<CardBody>
										<p className="lead bb">Dokumen Rekomendasi Delegasi</p>
										<Formik
											initialValues={{
												dokumen: [],
											}}
											validationSchema={rekomendasiSchema}
											onSubmit={async (data) => {
												this.setState({ data });
												await this.handelSimpan();
											}}
										>
											{() => (
												<Form className="form-horizontal">
													<FormGroup>
														<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" + (isDragActive ? "dropzone-drag-active" : "")}>
																					<input {...getInputProps()} />
																					<div className="dropzone-previews flex">
																						<div className="dropzone-style-1">
																							<div className="center-ver-hor dropzone-previews flex">{this.state.files.length > 0 ? <Row><span className="text-left">{thumbs}</span></Row> :
																								<div className="text-center fa-2x icon-cloud-upload mr-2 ">
																									<h5 className="text-center dz-default dz-message">upload dokumen rekomendasi delegasi</h5>
																								</div>
																							}
																							</div>
																						</div>
																					</div>
																					<div className="d-flex align-items-center">
																						<small className="ml-auto">
																							<button
																								type="button"
																								className="btn btn-link"
																								onClick={(e) => {
																									this.clearFiles(e);
																									form.setFieldValue(field.name, []);
																								}}
																							>
																								Reset dokumen
																							</button>
																						</small>
																					</div>
																				</div>
																			);
																		}}
																	</DropzoneWrapper>
																)}
															</Field>
															<ErrorMessage name="dokumen" component="div" className="form-text text-danger" />
															<p className="mrgn-top-5">Ukuran setiap dokumen maksimal 15mb</p>
														</div>
													</FormGroup>
													{/* <FormGroup>
													<div className="row-xl-10"> */}
													<FormGroup row>
														<div className="col-xl-10">
															<Button color className="color-3e3a8e btn-login" type="submit">
																<span className="font-color-white">Kirim</span>
															</Button>
														</div>
													</FormGroup>
													{/* <Button color="primary" onClick={sanksi.data.jawaban?.keberatan ? this.toggleModal : this.handelSimpan}>
															Simpan
														</Button> */}
													{/* </div>
												</FormGroup> */}
												</Form>
											)}
										</Formik>
									</CardBody>
								</Card>

							</Col>
							<Col xl="3">{pt ? <DetailPT data={pt} /> : <Loader />}</Col>
						</Row>
					)}
				</div>
			</ContentWrapper>
		);
	}
}

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