import React, { Component } from "react";
import Router from "next/router";
import Link from "next/link";
import Select from "react-select";
import Datatable from "@/components/Tables/Datatable";
import Scrollable from "@/components/Common/Scrollable";

import ContentWrapper from "@/components/Layout/ContentWrapper";
import {
	Row,
	Col,
	Card,
	CardHeader,
	CardBody,
	CardTitle,
	FormGroup,
	FormFeedback,
	FormText,
	Label,
	InputGroup,
	InputGroupAddon,
	InputGroupButtonDropdown,
	InputGroupText,
	Input,
	Button,
	DropdownToggle,
	DropdownMenu,
	CustomInput,
	DropdownItem,
} from "reactstrap";

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 styleHeaderText = {
	color: "brown",
};

const selectInstanceId = 1;

class UploadKeberatan extends Component {
	constructor(props) {
		super(props);
		this.state = {
			selectedOption: null,
			files: [],
		};
	}

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

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

	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 (
			<ContentWrapper unwrap>
				<div className="bg-cover" style={{ backgroundImage: "url(/static/img/profile-bg.png)" }}>
					<div className="p-4 text-center" style={styleHeaderText}>
						<img className="img-thumbnail rounded-circle thumb128" src="/static/img/univ-avatar.png" alt="Avatar" />
						<h3 className="m-0">Universitas Satyagama</h3>
						<p>0742/O/1990</p>
						<p>Jalan Kamal Raya No 2-A Cengkareng</p>
					</div>
				</div>
				<div className="p-3">
					<div className="content-heading">
						<div>
							Permohonan Keberatan
							{/* <small>Form pembuatan laporan baru v.0.1</small> */}
						</div>
						<div className="ml-auto">
							<Link href="/app/pt/keberatan">
								<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
							</Link>
						</div>
					</div>
					<Row>
						<Col xl="9">
							<Card className="card-default">
								{/* <CardHeader>
									<label>Informasi Dokumen</label>
								</CardHeader> */}
								<CardBody>
									<Row>
										<Col lg="6">
											<p className="lead bb">Detail Laporan</p>
											<form className="form-horizontal">
												<FormGroup row>
													<Col md="4">Nomor Laporan:</Col>
													<Col md="8">
														<strong>987654</strong>
													</Col>
												</FormGroup>
												<FormGroup row>
													<Col md="4">Nama Perguruan Tinggi:</Col>
													<Col md="8">
														<strong>Universitas Satyagama</strong>
													</Col>
												</FormGroup>
												<FormGroup row>
													<Col md="4">Jenis Pelanggaran:</Col>
													<Col md="8">
														<Scrollable height="75px" className="list-group">
															<ul>
																<li>Lorem ipsum dolor sit amet.</li>
																<li>Lorem, ipsum dolor.</li>
																<li>Lorem ipsum dolor sit.</li>
															</ul>
														</Scrollable>
													</Col>
												</FormGroup>
												<FormGroup row>
													<Col md="4">Keterangan Laporan:</Col>
													<Col md="8">
														<Scrollable height="100px" className="list-group">
															<p>
																Lorem ipsum dolor sit, amet consectetur adipisicing elit. Amet dicta placeat enim illo aspernatur adipisci neque repellendus itaque blanditiis fugit. Quam obcaecati sed
																perferendis facere.
															</p>
														</Scrollable>
													</Col>
												</FormGroup>
												<FormGroup row>
													<Col md="4">Dibuat Pada:</Col>
													<Col md="8">
														<strong>23 Januari 2022</strong>
													</Col>
												</FormGroup>
												<FormGroup row>
													<Col md="4">Status</Col>
													<Col md="8">
														<div className="badge badge-info">Ditindaklanjuti</div>
													</Col>
												</FormGroup>
												<FormGroup row>
													<Col md="4">File Pendukung</Col>
													<Col md="8">
														<Scrollable height="120px" className="list-group">
															<table className="table table-bordered bg-transparent">
																<tbody>
																	<tr>
																		<td>
																			<em className="fa-lg far fa-file-code"></em>
																		</td>
																		<td>
																			<a className="text-muted" href="">
																				database.controller.js
																			</a>
																		</td>
																	</tr>
																	<tr>
																		<td>
																			<em className="fa-lg far fa-file-image"></em>
																		</td>
																		<td>
																			<a className="text-muted" href="">
																				baground-lg.png
																			</a>
																		</td>
																	</tr>
																	<tr>
																		<td>
																			<em className="fa-lg far fa-file-code"></em>
																		</td>
																		<td>
																			<a className="text-muted" href="">
																				picture.controller.js
																			</a>
																		</td>
																	</tr>
																	<tr>
																		<td>
																			<em className="fa-lg far fa-file-word"></em>
																		</td>
																		<td>
																			<a className="text-muted" href="">
																				applicat-diagrams.docx
																			</a>
																		</td>
																	</tr>
																	<tr>
																		<td>
																			<em className="fa-lg far fa-file-code"></em>
																		</td>
																		<td>
																			<a className="text-muted" href="">
																				database.controller.js
																			</a>
																		</td>
																	</tr>
																	<tr>
																		<td>
																			<em className="fa-lg far fa-file-code"></em>
																		</td>
																		<td>
																			<a className="text-muted" href="">
																				database.controller.js
																			</a>
																		</td>
																	</tr>
																</tbody>
															</table>
														</Scrollable>
													</Col>
												</FormGroup>
											</form>
										</Col>
										<Col lg={6}>
											<p className="lead bb">Jawaban</p>
											<form className="form-horizontal" method="get" action="/" onSubmit={this.onSubmit}>
												<FormGroup>
													<label className="row-form-label">Status:</label>
													<div className="row-md-10">
														<Select
															instanceId={selectInstanceId + 1}
															value={this.state.selectedOption}
															onChange={this.handleChangeSelect}
															options={[
																{ value: "ditolak", label: "Ditolak", className: "State-ACT" },
																{ value: "mengubah sanksi", label: "Mengubah Sanksi", className: "State-ACT" },
																{ value: "mencabut sanksi", label: "Mencabut Sanksi", className: "State-ACT" },
															]}
															required
														/>
														{/* <span className="form-text">Pilih Jenis Pelanggaran</span> */}
													</div>
												</FormGroup>
												<FormGroup>
													<label className="row-form-label">Keterangan Dokumen:</label>
													<div className="row-md-10">
														<Input type="textarea" value={this.state.keteranganLaporan} onChange={this.setKeteranganPelaporan} required />
														{/* <span className="form-text">Deskripsi pelaporan minimum karakter 50 maksimum 200 karakter</span> */}
													</div>
												</FormGroup>
												<FormGroup>
													<label className="row-form-label">Dokumen Jawaban:</label>
													<div className="row-md-10">
														<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>
													</div>
												</FormGroup>
												<FormGroup>
													<div className="row-xl-10">
														<button className="btn btn-sm btn-primary" type="submit">
															Simpan
														</button>
													</div>
												</FormGroup>
											</form>
										</Col>
									</Row>
								</CardBody>
							</Card>
							{/* END card */}
						</Col>
						<Col xl="3">
							<div className="card card-default">
								<div className="card-body">
									<div className="text-center">
										<h3 className="mt-0">Universitas Satyagama</h3>
										<p>0742/O/1990</p>
									</div>
									<hr />
									<ul className="list-unstyled px-4">
										<li>
											<em className="fa fa-globe fa-fw mr-3"></em>www.satyagama.ac.id
										</li>
										<li>
											<em className="fa fa-graduation-cap fa-fw mr-3"></em>Status Pelanggaran : Tidak Ada
										</li>
									</ul>
								</div>
							</div>
						</Col>
					</Row>
					<Row>
						<Col>
							<Card className="card-default">
								<CardHeader>
									<CardTitle>Riwayat</CardTitle>
									{/* <div className="text-sm">DataTables has most features enabled by default, so all you need to do to use it with your own tables is to call the construction function: $().DataTable();.</div> */}
								</CardHeader>
								<CardBody>
									<Datatable options={{ responsive: true }}>
										<table className="table table-striped my-4 w-100">
											<thead>
												<tr>
													<th>Tanggal</th>
													<th>Status</th>
													<th>Keterangan Dokumen</th>
													<th>Dokumen Jawaban</th>
												</tr>
											</thead>
											<tbody>
												<tr>
													<td>23/01/2022</td>
													<td>Ditolak</td>
													<td>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos, maxime.</td>
													<td>
														<em className="fa-lg far fa-file-code"></em>
														<a className="text-muted" href="">
															database.controller.js
														</a>
													</td>
												</tr>
												<tr>
													<td>23/01/2022</td>
													<td>Ditolak</td>
													<td>Lorem ipsum dolor sit amet consectetur adipisicing.</td>
													<td>
														<em className="fa-lg far fa-file-code"></em>
														<a className="text-muted" href="">
															database.controller.js
														</a>
													</td>
												</tr>
												<tr>
													<td>23/01/2022</td>
													<td>Ditolak</td>
													<td>Lorem ipsum dolor sit.</td>
													<td>
														<em className="fa-lg far fa-file-code"></em>
														<a className="text-muted" href="">
															database.controller.js
														</a>
													</td>
												</tr>
											</tbody>
										</table>
									</Datatable>
								</CardBody>
							</Card>
						</Col>
					</Row>
				</div>
			</ContentWrapper>
		);
	}
}

export default UploadKeberatan;