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";
import Select from "react-select";
import "react-datetime/css/react-datetime.css";
import { connect } from "react-redux";
import Loader from "@/components/Common/Loader";

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

	componentDidMount = async () => {
		const { user, token } = this.props;
		if (user.role.id === 2020) {
			const dataPembina = await getPembina(token);
			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) => {
		e.preventDefault();
		Router.push({
			pathname: "/app/pelaporan/new",
			query: { ptId: PT_ID },
		});
	};

	fetchData = async () => {
		const pembina = this.props.user.role.id === 2021 ? this.props.user.lembaga.id : this.state.selectedOptionMulti.map((e) => e.value).join(",");
		const searchValue = document.getElementById("searchInput").value;
		const jsonData = await getPT(this.props.token, { search: searchValue, pembina });
		this.setState({ data: jsonData.data });
	};

	handleApplyClick = () => {
		this.setState({ loading: true });
		this.fetchData();
		this.setState({ loading: false });
		if (this.state.data && this.state.data.length) {
			this.renderTableData();
		}
	};

	handleSearchClick = () => {
		this.setState({ loading: true });
		this.fetchData();
		this.setState({ loading: false });
		if (this.state.data.length) {
			this.renderTableData();
		}
	};

	renderTableData() {
		return (
			!this.state.loading &&
			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>
										{this.props.user.role.id === 2021 ? "" : <p>Pembina: {pt.pembina.nama}</p>}
									</div>
									<div className="ml-auto">
										<Button color className="color-3e3a8e" size="sm" onClick={(e) => this.handleClick(e, pt.id)}>
											<span className="font-color-white">
												Buat Laporan
											</span>
										</Button>
									</div>
								</div>
							</div>
						</td>
					</tr>
				);
			})
		);
	}

	render() {
		const { selectedOptionMulti, pembina } = this.state;
		return (
			<ContentWrapper>
				<div className="content-heading">
					<div className="font-color-white">
						Pelaporan
						<div className="font-color-white font-10">Pilih Perguruan Tinggi</div>
					</div>
					<div className="ml-auto">
						<Link href="/app/pelaporan">
							<Button className="color-3e3a8e" color>
								<span className="font-color-white">
									&lt; Kembali
								</span>
							</Button>
						</Link>
					</div>
				</div>
				<Row>
					<Col lg={this.props.user.role.id === 2021 ? 12 : 9}>
						<div className="form-group mb-4">
							<input
								className="form-control mb-2"
								type="text"
								id="searchInput"
								onKeyPress={(e) => {
									if (e.key === "Enter") {
										this.handleApplyClick();
									}
								}}
								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">{this.props.user.role.id === 2021 && `Pembina: ${this.props.user.lembaga.nama}`}</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>
					{this.props.user.role.id === 2021 ? (
						""
					) : (
						<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>
		);
	}
}

const mapStateToProps = (state) => ({ user: state.user, token: state.token });
export default connect(mapStateToProps)(Search);