import React, { Component } from "react";
import BasePage from "@/components/Layout/BasePage";
import { getPT } from "@/actions/PT";
import { getPelanggaran } from "@/actions/pelanggaran";
import Select from "react-select";
import AsyncSelect from "react-select/async";
import { Row, Col, FormGroup, Input, Card, CardBody, Button, CustomInput, Navbar, NavItem, NavLink, NavbarBrand, NavbarToggler, Nav, Collapse } from "reactstrap";
import Link from "next/link";
import ContentWrapper from "@/components/Layout/ContentWrapper";

const loadOptions = (inputValue, callback) => {
	setTimeout(async () => {
		const pt = await getPT({ search: inputValue });
		const data = pt.data.map((e) => ({ value: e.id, label: e.nama, className: "State-ACT" }));
		callback(data);
	}, 1000);
};

const menu = [
	{
		title: "Home",
		path: "/app",
	},
	{
		title: "Membuat Laporan",
		path: "/laporan/new",
	},
	{
		title: "Pemantauan",
		path: "/pemantauan",
	},
	{
		title: "Login",
		path: "/login",
	},
];
const selectInstanceId = 1;
class App extends Component {
	constructor(props) {
		super(props);
		this.state = {
			isOpen: false,
			inputValue: "",
			stat: "Waiting to add files..",
			pelaporanNumber: Math.floor(Date.now() * Math.random()),
			nama: "",
			alamat: "",
			no_hp: "",
			email: "",
			fileIdentitas: null,
			pelanggaran: [],
			selectedPerguruanTinggi: {},
			selectedJenis: [],
			keteranganLaporan: "",
			files: [],
		};
	}

	static getInitialProps = ({ pathname }) => ({ pathname });

	componentDidMount = async () => {
		const pelanggaran = await getPelanggaran();
		this.setState({ pelanggaran });
	};

	toggleCollapse = () => {
		this.setState({
			isOpen: !this.state.isOpen,
		});
	};

	optionsJenisPelanggaran = (pelanggaran) => {
		return pelanggaran.data.map((e) => ({ value: e._id, label: e.pelanggaran, className: "State-ACT" }));
	};

	setKeteranganPelaporan = (e) => {
		this.setState({ keteranganLaporan: e.target.value });
	};

	handleChangeSelectJenis = (selectedJenis) => {
		this.setState({ selectedJenis });
	};

	handleChangeSelectPerguruanTinggi = (selectedPerguruanTinggi) => {
		this.setState({ selectedPerguruanTinggi });
	};

	handleInputChange = (newValue) => {
		const inputValue = newValue.replace(/\W/g, "");
		this.setState({ inputValue });
		return inputValue;
	};

	render() {
		const { selectedJenis, pelanggaran } = this.state;
		return (
			<div>
				<Navbar color="info" expand="md" dark>
					<NavbarBrand href="/">
						<img className="img-fluid" src="/static/img/logo-single.png" alt="App Logo" /> Aldila Dikti
					</NavbarBrand>
					<NavbarToggler onClick={this.toggleCollapse} />
					<Collapse isOpen={this.state.isOpen} navbar>
						<Nav className="ml-auto" navbar>
							{menu.map((e) => (
								<NavItem active={e.path === this.props.pathname ? true : false}>
									<Link href={e.path}>
										<NavLink style={{ cursor: "pointer" }}>{e.title}</NavLink>
									</Link>
								</NavItem>
							))}
						</Nav>
					</Collapse>
				</Navbar>
				<ContentWrapper>
					<Row>
						<Col lg={8} className="block-center d-block ">
							<Card>
								<CardBody>
									<form className="form-horizontal" method="post" onSubmit={this.onSubmit}>
										<p className="lead bb">Identitas Pelapor</p>
										<FormGroup row>
											<label className="col-md-2 col-form-label">Nama Pelapor</label>
											<div className="col-md-10">
												<Input type="text" value={this.state.nama} onChange={(e) => this.setState({ nama: e.target.value })} required />
											</div>
										</FormGroup>
										<FormGroup row>
											<label className="col-md-2 col-form-label">Nomor yang dapat dihubungi</label>
											<div className="col-md-10">
												<Input type="text" value={this.state.no_hp} onChange={(e) => this.setState({ no_hp: e.target.value })} required />
											</div>
										</FormGroup>
										<FormGroup row>
											<label className="col-md-2 col-form-label">Email</label>
											<div className="col-md-10">
												<Input type="email" value={this.state.email} onChange={(e) => this.setState({ email: e.target.value })} required />
											</div>
										</FormGroup>
										<FormGroup row>
											<label className="col-md-2 col-form-label">Alamat</label>
											<div className="col-md-10">
												<Input type="textarea" value={this.state.alamat} onChange={(e) => this.setState({ alamat: e.target.value })} required />
											</div>
										</FormGroup>
										<FormGroup row>
											<label className="col-md-2 col-form-label">Foto Identitas Diri</label>
											<div className="col-md-10">
												<Input type="file" onChange={(e) => this.setState({ fileIdentitas: e.target.files[0] })} />
											</div>
										</FormGroup>
										<p className="lead bb">Detail Laporan</p>
										<FormGroup row>
											<label className="col-md-2 col-form-label">Nomor Pelaporan</label>
											<div className="col-md-10">
												<Input type="text" disabled value={this.state.pelaporanNumber} />
											</div>
										</FormGroup>
										<FormGroup row>
											<label className="col-md-2 col-form-label">Perguruan Tinggi</label>
											<div className="col-md-10">
												<AsyncSelect cacheOptions loadOptions={loadOptions} defaultOptions onChange={this.handleChangeSelectPerguruanTinggi} onInputChange={this.handleInputChange} required />
											</div>
										</FormGroup>
										<FormGroup row>
											<label className="col-md-2 col-form-label">Jenis Pelanggaran</label>
											<div className="col-md-10">
												<Select
													instanceId={selectInstanceId + 1}
													isMulti
													value={selectedJenis}
													onChange={this.handleChangeSelectJenis}
													options={pelanggaran.data ? this.optionsJenisPelanggaran(pelanggaran) : []}
													required
												/>
											</div>
										</FormGroup>
										<FormGroup row>
											<label className="col-md-2 col-form-label">Keterangan Laporan</label>
											<div className="col-md-10">
												<Input type="textarea" value={this.state.keteranganLaporan} onChange={this.setKeteranganPelaporan} required />
											</div>
										</FormGroup>
										<FormGroup row>
											<label className="col-md-2 col-form-label">File Pendukung</label>
											<div className="col-md-10">
												<Input type="file" multiple onChange={(e) => this.setState({ files: e.target.files })} />
											</div>
										</FormGroup>
										<FormGroup row>
											<div className="col-xl-10">
												<div className="checkbox c-checkbox">
													<label>
														<Input type="checkbox" defaultChecked="" />
														<span className="fa fa-check"></span>Apakah anda ingin merahasiakan identitas anda
													</label>
												</div>
												<div className="checkbox c-checkbox">
													<label>
														<Input type="checkbox" defaultChecked="" />
														<span className="fa fa-check"></span>Apakah Data yang anda Laporkan sudah benar
													</label>
												</div>
											</div>
										</FormGroup>
										<FormGroup row>
											<div className="col-12 col-lg-2">
												<Button color="info" block type="submit">
													Kirim Laporan
												</Button>
											</div>
										</FormGroup>
									</form>
								</CardBody>
							</Card>
						</Col>
					</Row>
				</ContentWrapper>
			</div>
		);
	}
}

App.Layout = BasePage;

export default App;