import React, { Component } from "react";
import Router from "next/router";
import ContentWrapper from "@/components/Layout/ContentWrapper";
import { Row, Col, Progress, Modal, ModalHeader, ModalBody, ModalFooter, Button, Table } from "reactstrap";
import { getPelaporan } from "../../../../actions/pelaporan";

import Sparkline from "@/components/Common/Sparklines";
import Datatable from "@/components/Tables/Datatable";
import moment from "moment";

class Keberatan extends Component {
	constructor(props) {
		super(props);
		this.state = {
			modal: false,
		};
	}

	static getInitialProps = async () => {
		const pelaporan = await getPelaporan();
		return { pelaporan };
	};

	handleYaClick = (e) => {
		e.preventDefault();
		this.toggleModal();
		Router.push({
			pathname: "/app/pt/keberatan/upload",
		});
	};

	handleTidakClick = (e) => {
		e.preventDefault();
		this.toggleModal();
		Router.push({
			pathname: "/app/pt/dokumen-perbaikan",
		});
	};

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

	render() {
		console.log(this.state);
		const { pelaporan } = this.props;
		return (
			<ContentWrapper>
				<div className="content-heading">Permohonan Keberatan</div>
				<Row>
					<Col lg="4">
						<div className="card b">
							<div className="card-body bb">
								<p>Overvall progress</p>
								<div className="d-flex align-items-center mb-2">
									<div className="w-100">
										<Progress className="progress-xs m0" color="info" value={20} />
									</div>
									<div className="ml-auto">
										<div className="col wd-xxs text-right">
											<div className="text-bold text-muted">20%</div>
										</div>
									</div>
								</div>
							</div>
							<div className="card-body">
								<p>Metrics</p>
								<div className="row text-center">
									<div className="col-6 col-lg-6 col-xl-6">
										<Sparkline
											values={[20, 80]}
											options={{
												type: "pie",
												height: "50",
												sliceColors: ["#edf1f2", "#23b7e5"],
											}}
											className="sparkline"
										/>
										<p className="mt-3">Open Case</p>
									</div>
									<div className="col-6 col-lg-6 col-xl-6">
										<Sparkline
											values={[80, 20]}
											options={{
												type: "pie",
												height: "50",
												sliceColors: ["#edf1f2", "#27c24c"],
											}}
											className="sparkline"
										/>
										<p className="mt-3">Close Case</p>
									</div>
								</div>
							</div>
							<table className="table bb">
								<tbody>
									<tr>
										<td>
											<strong>Open Case</strong>
										</td>
										<td>80</td>
									</tr>
									<tr>
										<td>
											<strong>Close Case</strong>
										</td>
										<td>20</td>
									</tr>
									<tr>
										<td>
											<strong>Performance</strong>
										</td>
										<td>
											<em className="far fa-smile fa-lg text-warning"></em>
										</td>
									</tr>
									<tr>
										<td>
											<strong>Last Case Closed</strong>
										</td>
										<td>BI:1107 - 12/01/2016</td>
									</tr>
								</tbody>
							</table>
						</div>
					</Col>
					<Col lg="8">
						<div className="card b">
							<div className="card-body">
								<Table options={{ responsive: true }}>
									{/* <table className="table w-100"> */}
									<thead>
										<tr>
											<th>#ID</th>
											<th>Description</th>
											<th>Created</th>
											<th>Status</th>
											<th></th>
										</tr>
									</thead>
									<tbody>
										{pelaporan.data.map((value) => {
											return (
												<tr key={value._id}>
													<td>BI:{value._number}</td>
													<td className="text-nowrap">
														<div className="media align-items-center">
															<img className="img-fluid rounded thumb64" src="/static/img/dummy-search.png" alt="Dummy" />
															<div className="media-body d-flex">
																<div>
																	<h4 className="m-0">Universitas Satyagama</h4>
																	<small className="text-muted">0742/O/1990 - www.satyagama.ac.id - info@satyagama.ac.id</small>
																	<p>{value.description}</p>
																</div>
															</div>
														</div>
													</td>
													<td>{moment(value.createdAt).fromNow()}</td>
													<td>
														<div className="inline wd-xxs badge badge-success">open</div>
													</td>
													<td>
														<Button color="primary" onClick={this.toggleModal}>
															Ajukan
														</Button>
														<Modal isOpen={this.state.modal} toggle={this.toggleModal}>
															<ModalHeader toggle={this.toggleModal}>Permohonan Keberatan</ModalHeader>
															<ModalBody>apakah anda akan mengajukan permohonan keberatan atas pengenaan sanksi?</ModalBody>
															<ModalFooter>
																<Button color="primary" onClick={(e) => this.handleYaClick(e)}>
																	Ya
																</Button>{" "}
																<Button color="secondary" onClick={(e) => this.handleTidakClick(e)}>
																	Tidak
																</Button>
															</ModalFooter>
														</Modal>
														{/* <Swal options={this.state.swalOption} callback={this.swalCallback} className="btn btn-primary">
															Ajukan
														</Swal> */}
														{/* START card */}
														{/* Button trigger modal */}
														{/* <Button color="primary" onClick={(e) => this.permohonanClick(e, value.pt_id, value.number)}>
															Ajukan
														</Button> */}
														{/* END card */}
														{/* <Button onClick={(e) => this.permohonanClick(e, value.pt_id, value.number)} className="btn-primary">
															Ajukan
														</Button> */}
													</td>
												</tr>
											);
										})}
									</tbody>
									{/* </table> */}
								</Table>
							</div>
						</div>
					</Col>
				</Row>
			</ContentWrapper>
		);
	}
}

export default Keberatan;