import React, { Component } from "react";
import ContentWrapper from "@/components/Layout/ContentWrapper";
import {
	Row,
	Col,
	Card,
	Button,
	CardHeader,
	CardFooter,
	Table,
	Nav,
	NavItem,
	NavLink,
	TabContent,
	TabPane,
	Pagination,
	PaginationItem,
	PaginationLink,
	ListGroup,
	ListGroupItem,
	Dropdown,
	DropdownMenu,
	DropdownToggle,
	DropdownItem,
} from "reactstrap";
//import { Row, Col, Card, CardHeader, CardFooter, Table, Pagination, PaginationItem, PaginationLink } from 'reactstrap';

// import { Row, Col, Dropdown, DropdownMenu, DropdownToggle, DropdownItem } from 'reactstrap';
import Select from "react-select";
import { GoogleMap, LoadScript, Marker } from "@react-google-maps/api";

import { GetServerSideProps, NextPage } from "next";
import ErrorPage from "next/error";
import fetch from "node-fetch";

import https from "https";

const containerStyle = {
	width: "100%",
	height: "155px",
};


var jenisPelanggaran = [];

//const qpt_id = {};

//http://localhost:3000/app/profile?ptId=0BCE4DB7-B207-445D-8D03-0C54B7688252

// Demo with custom style
const DemoMapCustomStyle = (props) => (
	<GoogleMap mapContainerStyle={containerStyle} zoom={14} center={props.location} options={{ styles: props.mapStyles }}>
		<Marker position={props.location} />
	</GoogleMap>
);

const styleHeaderText = {
	color: "brown",
};

class Profile extends Component {
	toggleTab = (tab) => {
		if (this.state.activeTab !== tab) {
			this.setState({
				activeTab: tab,
			});
		}
	};

	static async getInitialProps({ query }) {
		const httpsAgent = new https.Agent({
			rejectUnauthorized: false,
		});
		const json = [
			{
				id: "0BCE4DB7-B207-445D-8D03-0C54B7688252",
				kode: "031031",
				kode_satker: null,
				nama: "Universitas Satyagama",
				nama_singkat: "USG",
				sk_pendirian: "0742/O/1990",
				tgl_sk_pendirian: "1990-12-22",
				sk_operasional: null,
				tgl_sk_operasional: null,
				status: "A",
				alamat: {
					jalan: "Jalan Kamal Raya No 2-A Cengkareng",
					rt: null,
					rw: null,
					dusun: null,
					kelurahan: "-",
					kode_pos: "11730",
					kab_kota: {
						id: "016200",
						nama: "Kota Jakarta Barat",
					},
				},
				propinsi: {
					id: "010000",
					nama: "Prov. D.K.I. Jakarta",
				},
				telepon: "(021) 5452377-78",
				faksimile: "(021) 54391325",
				website: "www.satyagama.ac.id",
				email: "info@satyagama.ac.id",
				status_milik: {
					id: "3",
					nama: "Yayasan",
				},
				pembina: {
					id: "728989DD-251E-4516-BE2C-BA17A93A5C51",
					nama: "LLDIKTI III",
				},
				bentuk_pendidikan: {
					id: "23",
					nama: "Universitas",
				},
				last_update: "2021-12-08",
				negara: {
					id: "ID",
					nama: "Indonesia",
				},
				pimpinan: {
					id: "D3D20B3D-0FBE-4706-8A70-67C4C09C8FBE",
					nama: "DEWI SULISTYANI",
					tmt_sk_pengangkatan: "2021-03-17",
					tst_sk_pengangkatan: "2025-03-17",
				},
			},
		];
		console.log("json : ", json);

		return { data: json[0] };
	}

	state = {
		dropdownOpen: false,
		dropdownOpenUpload: false,
		timelineAlt: false,
		location: { lat: 33.7906731, lng: -117.8357194 },
		customStyle: [
			{ featureType: "water", stylers: [{ visibility: "on" }, { color: "#bdd1f9" }] },
			{ featureType: "all", elementType: "labels.text.fill", stylers: [{ color: "#334165" }] },
			{ featureType: "landscape", stylers: [{ color: "#e9ebf1" }] },
			{ featureType: "road.highway", elementType: "geometry", stylers: [{ color: "#c5c6c6" }] },
			{ featureType: "road.arterial", elementType: "geometry", stylers: [{ color: "#fff" }] },
			{ featureType: "road.local", elementType: "geometry", stylers: [{ color: "#fff" }] },
			{ featureType: "transit", elementType: "geometry", stylers: [{ color: "#d8dbe0" }] },
			{ featureType: "poi", elementType: "geometry", stylers: [{ color: "#cfd5e0" }] },
			{ featureType: "administrative", stylers: [{ visibility: "on" }, { lightness: 33 }] },
			{ featureType: "poi.park", elementType: "labels", stylers: [{ visibility: "on" }, { lightness: 20 }] },
			{ featureType: "road", stylers: [{ color: "#d8dbe0", lightness: 20 }] },
		],
		listA: [],
		selectedOptionMulti: [],
		activeTab: "tasks",
	};

	toggleDD = () =>
		this.setState({
			dropdownOpen: !this.state.dropdownOpen,
		});

	toggleDDUpload = () =>
		this.setState({
			dropdownOpenUpload: !this.state.dropdownOpenUpload,
		});

	toggleTimeline = (e) => {
		this.setState({
			timelineAlt: e.target.checked,
		});
	};

	render() {
		const { selectedOptionMulti } = this.state;

		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">{this.props.data.nama}</h3>
						<p>{this.props.data.sk_pendirian}</p>
						<p>{this.props.data.alamat.jalan}</p>
					</div>
				</div>
				<div className="p-3">
					<Row>
						<Col xl="9">
							<ul className="timeline">
								<li className="timeline-separator" data-datetime="Today"></li>
								<li className="timeline-inverted">
									<div className="timeline-badge info">
										<em className="far fa-file"></em>
									</div>
									<div className="timeline-card">
										<div className="popover right">
											<div className="arrow"></div>
											<div className="popover-body">
												<div className="d-flex align-items-center mb-3">
													<img className="mr-3 rounded-circle thumb48" src="/static/img/user/admin.png" alt="Avatar" />
													<p className="m-0">
														{/* <a className="text-muted" href=""> */}
														<strong>Admin</strong>
														{/* </a> */}
														<br />
														Upload Bukti Perbaikan
														{/* <em className="fa fa-paperclip"></em> */}
														<Dropdown isOpen={this.state.dropdownOpenUpload} toggle={this.toggleDDUpload}>
															{/* <em className="fa fa-graduation-cap fa-fw mr-3"></em>Status */}
															{/* <p className="m-0"><br/> Upload Bukti Perbaikan </p> */}
															<DropdownToggle caret color="link">
																<em className="fa fa-paperclip"></em>
															</DropdownToggle>
															<DropdownMenu className="animated fadeInUpShort">
																<DropdownItem>
																	<em className="fa fa-lock mr-2"></em>Upload
																</DropdownItem>
															</DropdownMenu>
														</Dropdown>
													</p>
													{/* <li> */}

													{/* </li> */}
												</div>
												{/* <a href="">
                                                    <img className="img-fluid img-thumbnail" src="/static/img/mockup.png" alt="Img"/>
                                                </a> */}
												<p className="text-muted my-2">3 Logs</p>
												<div className="media bb p-2">
													<img className="mr-2 rounded-circle thumb32" src="/static/img/user/user.png" alt="Avatar" />
													<div className="media-body">
														<p className="m-0">
															<a href="">
																<strong>Universitas Username</strong>
															</a>
														</p>
														<div className="text-sm text-muted">Uploaded Document File BBB.pdf</div>
													</div>
													<small className="ml-auto text-muted">12m ago</small>
												</div>
												<div className="media bb p-2">
													<img className="mr-2 rounded-circle thumb32" src="/static/img/user/user.png" alt="Avatar" />
													<div className="media-body">
														<p className="m-0">
															<a href="">
																<strong>Universitas Username</strong>
															</a>
														</p>
														<div className="text-sm text-muted">Uploaded Document File CCC.pdf</div>
													</div>
													<small className="ml-auto text-muted">30m ago</small>
												</div>
												<div className="media bb p-2">
													<img className="mr-2 rounded-circle thumb32" src="/static/img/user/user.png" alt="Avatar" />
													<div className="media-body">
														<p className="m-0">
															<a href="">
																<strong>Universitas Username</strong>
															</a>
														</p>
														<div className="text-sm text-muted">Uploaded Document File AAA.pdf</div>
													</div>
													<small className="ml-auto text-muted">30m ago</small>
												</div>
												{/* <form className="mt-2" method="post" action="#">
                                                    <textarea className="form-control no-resize" placeholder="Comment..." rows="1"></textarea>
                                                </form> */}
											</div>
										</div>
									</div>
								</li>
								<li>
									<div className="timeline-badge danger">
										<em className="fas fa-ticket-alt"></em>
									</div>
									<div className="timeline-card">
										<div className="popover left">
											<div className="arrow"></div>
											<div className="popover-body">
												<div className="d-flex align-items-center mb-3">
													<img className="mr-3 rounded-circle thumb48" src="/static/img/user/admin.png" alt="Avatar" />
													<p className="m-0">
														{/* <a className="text-muted" href=""> */}
														<strong>Admin</strong>
														{/* </a> */}
														<br />
														opened project
														<a className="ml-2" href="">
															#548795
														</a>
													</p>
												</div>
												<p>
													<em>&mdash; Project description sample</em>
												</p>
											</div>
										</div>
									</div>
								</li>
								<li className="timeline-end">
									<a className="timeline-badge">
										<em className="fa fa-plus"></em>
									</a>
								</li>
							</ul>
						</Col>
						<Col xl="3">
							<div className="card card-default">
								<div className="card-body">
									<div className="text-center">
										<h3 className="mt-0">{this.props.data.nama}</h3>
										<p>{this.props.data.sk_pendirian}</p>
									</div>
									<hr />
									<ul className="list-unstyled px-4">
										<li>
											<em className="fa fa-globe fa-fw mr-3"></em>
											{this.props.data.website}
										</li>
										<li>
											<em className="fa fa-graduation-cap fa-fw mr-3"></em>Status Pelanggaran : Tidak Ada
										</li>
									</ul>
								</div>
							</div>
						</Col>
					</Row>
				</div>
			</ContentWrapper>
		);
	}
}

export default Profile;