import React, { Component } from "react";
import Router from "next/router";
import Link from "next/link";
import Select from "react-select";
import DetailSanksi from "@/components/Main/DetailSanksi";
import DetailPT from "@/components/Main/DetailPT";
import PermohonanPT from "@/components/Main/PermohonanPT";
import Riwayat from "@/components/Keberatan/Riwayat";
import { getOneSanksi } from "@/actions/sanksi";
import ContentWrapper from "@/components/Layout/ContentWrapper";
import { Row, Col, Card, CardBody, FormGroup, Input, Button, Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap";
import Loader from "@/components/Common/Loader";
import { toast } from "react-toastify";
import { connect } from "react-redux";
import { Formik, Form, Field, ErrorMessage } from "formik";
import * as Yup from "yup";
import { createLog } from "@/actions/log";
import id from 'date-fns/locale/id';
import moment from "moment";
import Datetime from "react-datetime";
import { getCsrf } from "../../../actions/security";
import swal from "sweetalert2";


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 jawabanKeberatanSchema = Yup.object().shape({
	status: Yup.string().required("Harap Diisi"),
	keterangan: Yup.string().min(3).max(200).required("Harap Diisi"),
	dokumen: Yup.array().notRequired().test("filesize", "Maksimal ukuran dokumen 15mb", checkIfFilesAreTooBig),
	dokumen_terima_keberatan: Yup.array().notRequired().test("filesize", "Maksimal ukuran dokumen 15mb", checkIfFilesAreTooBig),
	tanggal_terima_keberatan: Yup.string().notRequired("Wajib diisi"),
	no_keberatan: Yup.string().min(3).notRequired("Harap Diisi"),
	tanggal_akhir_banding: Yup.string().notRequired("Wajib diisi"),
	tanggal_surat_keberatan: Yup.string().notRequired("Wajib diisi"),
});
class DetailKeberatan extends Component {
	constructor(props) {
		super(props);
		this.state = {
			modal: false,
			selectedOption: null,
			files: [],
			fileTTSKeberatan: [],
			no_keberatan: "",
			tglTerimaKeberatan: "",
			tglAkhirBanding: "",
			keterangan: "",
			sanksi: {},
			pt: null,
			data: {},
			tglSuratKeberatan: "",
			selectedFile: {},
			selectFileTTSKeberatan: {},
		};
	}

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

	componentDidMount = async () => {
		const { query, token } = this.props;
		const sanksi = await getOneSanksi(token, query.id);
		const getTokenCsrf = await getCsrf();
		const _csrf = getTokenCsrf.token;
		await createLog(token, { aktivitas: `Mengakses halaman detail Keberatan dengan No. Sanksi ${sanksi.data.no_sanksi}`, menu: "Keberatan", _csrf: _csrf });
		const pt = sanksi.data.laporan.pt;
		this.setState({ sanksi, pt });
	};

	toggleModal = () => {
		this.setState({
			modal: !this.state.modal,
		});
	};

	handleChangeSelect = (selectedOption) => {
		this.setState({ selectedOption });
	};

	onDrop = (selectedFile) => {
		this.setState({
			selectedFile: selectedFile.map((file) =>
				Object.assign(file, {
					preview: URL.createObjectURL(file),
				})
			),
			stat: "Added " + selectedFile.length + " file(s)",
		});
		const selectFile = this.state.selectedFile
		this.setState(prevState => ({
			files: [...prevState.files, ...selectFile]
		}))
	};
	onDropTTSKeberatan = (selectFileTTSKeberatan) => {
		this.setState({
			selectFileTTSKeberatan: selectFileTTSKeberatan.map((file) =>
				Object.assign(file, {
					preview: URL.createObjectURL(file),
				})
			),
			stat: "Added " + selectFileTTSKeberatan.length + " file(s)",
		});
		const selectFile = this.state.selectFileTTSKeberatan
		this.setState(prevState => ({
			fileTTSKeberatan: [...prevState.fileTTSKeberatan, ...selectFile]
		}))

	};

	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: [],
		});
	};
	clearFilesTTSKeberatan = (e) => {
		e.preventDefault();
		e.stopPropagation();
		this.setState({
			stat: this.state.fileTTSKeberatan.length ? this.state.fileTTSKeberatan.length + " file(s) cleared." : "No files to clear.",
		});
		this.setState({
			fileTTSKeberatan: [],
		});
	};

	handelSimpan = async () => {
		if (this.props?.user?.role.id === 2071) {
			swal.fire({
				icon: 'error',
				title: 'Oops...',
				html: 'Maaf anda tidak memiliki akses untuk menyelesaikan<p> proses ini.</p>',
				confirmButtonColor: "#3e3a8e",
				confirmButtonText: 'Oke'
				// footer: '<a href="">Why do I have this issue?</a>'
			})
		} else {
			const getTokenCsrf = await getCsrf();
			const _csrf = getTokenCsrf.token;
			if (this.state.modal === true) {
				this.toggleModal();
			}
			const { data } = this.state;
			const { query, token } = this.props;
			const { id } = query;
			const formdata = new FormData();
			formdata.append("keterangan", data.keterangan);
			formdata.append("status", data.status);
			formdata.append("no_keberatan", data.no_keberatan);
			formdata.append("tanggal_terima_keberatan", data.tanggal_terima_keberatan);
			formdata.append("tanggal_akhir_banding", data.tanggal_akhir_banding);
			formdata.append("tanggal_surat_keberatan", data.tanggal_surat_keberatan);
			data.dokumen.forEach((e) => {
				formdata.append("dokumen", e);
			});
			data.dokumen_terima_keberatan.forEach((e) => {
				formdata.append("dokumen_terima_keberatan", e);
			});
			console.log(data)
			const toastid = toast.loading("Please wait...");
			const added = await addJawabanKeberatan(token, id, formdata, _csrf);
			if (!added) {
				toast.update(toastid, { render: "Gagal Menjawab Keberatan", type: "error", isLoading: false, autoClose: true, closeButton: true });
			} else {
				toast.update(toastid, { render: "Berhasil Menjawab Keberatan", type: "success", isLoading: false, autoClose: true, closeButton: true });
				Router.push({
					pathname: "/app/keberatan",
				});
			}
		}
	};

	render() {
		const { files, sanksi, pt, fileTTSKeberatan, tglTerimaKeberatan, tglSuratKeberatan } = 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>
		));
		const thumbsTTSKeberatan = fileTTSKeberatan.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">Permohonan Keberatan</span>
						<div className="ml-auto">
							<Link href="/app/keberatan">
								<Button className="color-3e3a8e btn-login" color>
									<span className="font-color-white">&lt; Kembali</span>
								</Button>
							</Link>
						</div>
					</div>
					<Row>
						{sanksi.data ? (
							<Col xl="9">
								<Card className="card-default">
									<CardBody>
										<Row>
											<Col lg={12}>
												<DetailSanksi data={sanksi.data} role={this.props.user.role.id} />
											</Col>
										</Row>
										<Row>
											<Col lg={12}>
												<PermohonanPT data={sanksi.data.pengajuan.keberatan} title="Permohonan Keberatan" role={this.props.user.role.id} />
											</Col>
										</Row>
										<Row>
											<Col lg={12}>
												<p className="lead bb">Jawaban</p>
												<Formik
													initialValues={{
														status: "",
														keterangan: "",
														dokumen: [],
														tanggal_terima_keberatan: "",
														no_keberatan: "",
														dokumen_terima_keberatan: [],
														tanggal_akhir_banding: "",
														tanggal_surat_keberatan: ""

													}}
													validationSchema={jawabanKeberatanSchema}
													onSubmit={async (data) => {
														this.setState({ data });
														if (sanksi.data.jawaban?.keberatan) this.toggleModal();
														else await this.handelSimpan();
													}}
												>
													{({ isSubmitting }) => (
														<Form className="form-horizontal">
															<FormGroup>
																<label className="row-form-label">Status :<span className="text-danger">*</span></label>
																<div className="row-md-10">
																	<Field name="status">
																		{({ field, form, meta }) => (
																			<Select
																				instanceId={selectInstanceId + 1}
																				value={this.state.selectedOption}
																				onChange={(e) => {
																					this.handleChangeSelect(e);
																					form.setFieldValue(field.name, e.value);
																				}}
																				options={[
																					{ value: "Menolak", label: "Menolak", className: "State-ACT" },
																					{ value: "Mengubah Keputusan", label: "Mengubah Keputusan", className: "State-ACT" },
																					{ value: "Membatalkan Keputusan", label: "Membatalkan Keputusan", className: "State-ACT" },
																				]}
																			/>
																		)}
																	</Field>
																	<ErrorMessage name="status" component="div" className="form-text text-danger" />
																</div>
															</FormGroup>
															<FormGroup>
																<label className="row-form-label">Keterangan :<span className="text-danger">*</span></label>
																<div className="row-md-10">
																	<Field name="keterangan">{({ field }) => <Input type="textarea" {...field} />}</Field>
																	<ErrorMessage name="keterangan" component="div" className="form-text text-danger" />
																	{/* <span className="form-text">Deskripsi pelaporan minimum karakter 50 maksimum 200 karakter</span> */}
																</div>
															</FormGroup>
															<FormGroup>
																<label className="row-form-label">Nomor Surat Jawaban Atas Permohonan Keberatan :<span className="text-danger">*</span></label>
																<div className="row-md-10">
																	<Field name="no_keberatan">{({ field }) => <Input type="text" {...field} />}</Field>
																	<ErrorMessage name="no_keberatan" component="div" className="form-text text-danger" />
																</div>
															</FormGroup>
															<FormGroup>
																<label className="row-form-label">Tanggal Surat Jawaban Atas Permohonan Keberatan :<span className="text-danger">*</span></label>
																<div className="row-md-10">
																	<Field name="tanggal_surat_keberatan">
																		{({ field, form }) => (
																			<Datetime
																			timeFormat={false}
																			inputProps={{ className: "form-control" }}
																			value={field.value || "DD/MM/YYYY"}
																			onChange={(tglSuratKeberatan) => {
																				form.setFieldValue(field.name, tglSuratKeberatan);
																				this.setState({ tglSuratKeberatan })
																			}}
																			closeOnSelect={true}
																		/>
																		)}
																	</Field>
																	<ErrorMessage name="tanggal_surat_keberatan" component="div" className="form-text text-danger" />
																</div>
															</FormGroup>
															<FormGroup>
																<label className="row-form-label">Dokumen Jawaban Atas Permohonan Keberatan :<span className="text-danger">*</span></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" + (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">Klik untuk upload dokumen</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>
																<label className="row-form-label">Tanggal Tanda Terima Surat Jawaban Atas Permohonan Keberatan :<span className="text-danger">*</span></label>
																<div className="row-md-10">
																	<Field name="tanggal_terima_keberatan">
																		{({ field, form }) => (
																			<Datetime
																			timeFormat={false}
																			inputProps={{ className: "form-control" }}
																			value={field.value || "DD/MM/YYYY"}
																			onChange={(tglTerimaKeberatan) => {
																				form.setFieldValue(field.name, tglTerimaKeberatan);
																				this.setState({ tglTerimaKeberatan })
																			}}
																			closeOnSelect={true}
																			isValidDate={(e) => {
																				return e.isAfter(new Date(this.state.tglSuratKeberatan))
																			}}

																		/>
																		)}
																	</Field>
																	<ErrorMessage name="tanggal_terima_keberatan" component="div" className="form-text text-danger" />
																</div>
															</FormGroup>

															<FormGroup>
																<label className="row-form-label">Dokumen Tanda Terima Surat Jawaban Atas Permohonan Keberatan :<span className="text-danger">*</span></label>
																<div className="row-md-10">
																	<Field name="dokumen_terima_keberatan">
																		{({ field, form }) => (
																			<DropzoneWrapper
																				className=""
																				onDrop={(e) => {
																					this.onDropTTSKeberatan(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.fileTTSKeberatan.length > 0 ? <Row><span className="text-left">{thumbsTTSKeberatan}</span></Row> :
																										<div className="text-center fa-2x icon-cloud-upload mr-2 ">
																											<h5 className="text-center dz-default dz-message">Klik untuk upload dokumen</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.clearFilesTTSKeberatan(e);
																											form.setFieldValue(field.name, []);
																										}}
																									>
																										Reset dokumen
																									</button>
																								</small>
																							</div>
																						</div>
																					);
																				}}
																			</DropzoneWrapper>
																		)}
																	</Field>
																	<ErrorMessage name="dokumen_terima_keberatan" component="div" className="form-text text-danger" />
																	<p className="mrgn-top-5">Ukuran setiap dokumen maksimal 15mb</p>
																</div>
															</FormGroup>
															<FormGroup>
																<label className="row-form-label">Tanggal Akhir Pengajuan Banding :<span className="text-danger">*</span> </label>
																<p>Note : 21 hari kerja</p>
																<div className="row-md-10">
																	<Field name="tanggal_akhir_banding">
																		{({ field, form }) => (
																			<Datetime
																			timeFormat={false}
																			inputProps={{ className: "form-control" }}
																			value={field.value || "DD/MM/YYYY"}
																			onChange={(tglAkhirBanding) => {
																				form.setFieldValue(field.name, tglAkhirBanding);
																				this.setState({ tglAkhirBanding })
																			}}
																			closeOnSelect={true}
																			isValidDate={(e) => {
																				return e.isAfter(new Date(this.state.tglTerimaKeberatan))
																			}}
																		/>
																		)}
																	</Field>
																	<ErrorMessage name="tanggal_akhir_banding" component="div" className="form-text text-danger" />
																</div>
															</FormGroup>
															<FormGroup row>
																<div className="col-xl-10">
																	<Button color className="color-3e3a8e btn-login" type="submit" disabled={isSubmitting}>
																		<span className="font-color-white">Simpan</span>
																	</Button>
																</div>
															</FormGroup>

														</Form>
													)}
												</Formik>
											</Col>
										</Row>
									</CardBody>
								</Card>
							</Col>
						) : (
							<Loader />
						)}
						<Col xl="3">{pt ? <DetailPT data={pt} /> : <Loader />}</Col>
					</Row>
					{sanksi.data && (
						<Row>
							<Col>
								<Riwayat data={sanksi.data.jawaban?.keberatan ? sanksi.data.jawaban.keberatan : null} role={this.props.user.role.id} />
							</Col>
						</Row>
					)}
				</div>
				<Modal isOpen={this.state.modal} toggle={this.toggleModal}>
					<ModalBody>Apakah anda yakin ingin mengubah jawaban sebelumnya?</ModalBody>
					<ModalFooter>
						<Button color="primary" onClick={this.handelSimpan}>
							Ya
						</Button>{" "}
						<Button color="secondary" onClick={this.toggleModal}>
							Tidak
						</Button>
					</ModalFooter>
				</Modal>
			</ContentWrapper>
		);
	}
}

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