import React, { Component } from "react";
import Router from "next/router";
import ContentWrapper from "@/components/Layout/ContentWrapper";
import { Row, Col, Button, Table, Pagination, PaginationItem, PaginationLink } from "reactstrap";
import Link from "next/link";
import { getPT, getPembina } from "@/actions/PT";
// React Slider
import Slider from "rc-slider";
import "rc-slider/assets/index.css";
// React Select
import Select from "react-select";
// DateTimePicker
import "react-datetime/css/react-datetime.css";

var pembina = [];
const selectInstanceId = 1;
class Search extends Component {
	state = {
		selectedOptionMulti: [],
		data: [],
		pembina: [],
	};

	componentDidMount = async () => {
		const dataPembina = await getPembina();
		this.setState({ pembina: dataPembina.data });
	};

	optionsPembina = (pembina) => {
		return pembina.map((e) => ({ value: e.id, label: e.nama, className: "State-ACT" }));
	};

	handleChangeSelectMulti = (selectedOptionMulti) => {
		this.setState({ selectedOptionMulti });
	};

	renderInputGroup = (props) => {
		return (
			<div className="input-group date">
				<input className="form-control" {...props} />
				<span className="input-group-append input-group-addon">
					<span className="input-group-text fas fa-calendar-alt"></span>
				</span>
			</div>
		);
	};

	handleClick = (e, PT_ID) => {
		const query = { ptId: PT_ID };
		e.preventDefault();
		Router.push({
			pathname: "/app/pelaporan/new",
			query: { ptId: PT_ID },
		});
	};

	fetchData = async () => {
		const pembina = this.state.selectedOptionMulti.join(",");
		const searchValue = document.getElementById("searchInput").value;
		const jsonData = await getPT({ search: searchValue, pembina });
		this.setState({ data: jsonData.data });
	};

	handleApplyClick = () => {
		this.fetchData();
		if (this.state.data && this.state.data.length) {
			this.renderTableData();
		}
	};

	handleSearchClick = () => {
		this.fetchData();
		if (this.state.data.length) {
			this.renderTableData();
		}
	};

	renderTableData() {
		return (
			this.state.data &&
			this.state.data.map((pt, index) => {
				return (
					<tr>
						<td>
							<label>{index + 1}</label>
						</td>
						<td>
							<div className="media align-items-center">
								<a className="mr-3" href="">
									<img className="img-fluid rounded thumb64" src="/static/img/dummy-search.png" alt="Dummy" />
								</a>
								<div className="media-body d-flex">
									<div>
										<h4 className="m-0">{pt.nama}</h4>
										<small className="text-muted">
											{pt.sk_pendirian} - {pt.website} - {pt.email}
										</small>
										<p>{pt.alamat.jalan}</p>
									</div>
									<div className="ml-auto">
										<Button color="info" size="sm" onClick={(e) => this.handleClick(e, pt.id)}>
											Buat Laporan
										</Button>
									</div>
								</div>
							</div>
						</td>
					</tr>
				);
			})
		);
	}

	render() {
		const { selectedOptionMulti, pembina } = this.state;
		console.log(pembina);

		return (
			<ContentWrapper>
				<div className="content-heading">
					<div>
						Pelaporan
						<small>Pilih Perguruan Tinggi</small>
					</div>
					<div className="ml-auto">
						<Link href="/app/pelaporan">
							<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
						</Link>
					</div>
				</div>
				<Row>
					<Col lg="9">
						<div className="form-group mb-4">
							<input className="form-control mb-2" type="text" id="searchInput" placeholder="Pencarian Nama Perguruan Tinggi" />
							<div className="d-flex">
								<button className="btn btn-secondary" type="button" onClick={(e) => this.handleSearchClick()}>
									Search
								</button>
								<div className="ml-auto"></div>
							</div>
						</div>
						<div className="card card-default">
							<div className="card-header">Search Results</div>
							<Table striped bordered hover>
								<thead>
									<tr>
										<th>No. </th>
										<th>Description</th>
									</tr>
								</thead>
								<tbody>{this.renderTableData()}</tbody>
							</Table>
							<div className="card-footer">
								<div className="d-flex"></div>
							</div>
						</div>
					</Col>
					<Col lg="3">
						<h3 className="m-0 pb-3">Filters</h3>
						<div className="form-group mb-4">
							<label className="col-form-label mb-2">by Pembina</label>
							<br />
							<Select instanceId={selectInstanceId + 1} isMulti value={selectedOptionMulti} onChange={this.handleChangeSelectMulti} options={pembina ? this.optionsPembina(pembina) : []} required />
						</div>
						<Button color="secondary" size="lg" onClick={(e) => this.handleApplyClick()}>
							Apply
						</Button>
					</Col>
				</Row>
			</ContentWrapper>
		);
	}
}

export default Search;