import React, { Component } from "react";
import ContentWrapper from "@/components/Layout/ContentWrapper";
import Header from "@/components/Main/Header";
import DetailPT from "@/components/Main/DetailPT";
import { getLogPT } from "@/actions/log";
import { getPT } from "@/actions/PT";
import { Row, Col, ModalHeader, ModalBody, ModalFooter, Modal, FormFeedback, Button } from "reactstrap";
import Timeline from "@/components/Main/Timeline";
import { connect } from "react-redux";
import Loader from "@/components/Common/Loader";
import { createotp, getkontakpt, createkontak } from "../../actions/auth";
import PhoneInput from 'react-phone-input-2'
import 'react-phone-input-2/lib/style.css'
import OtpInput from 'react-otp-input';
import { ToastContainer, toast } from "react-toastify";
import swal from "sweetalert2";



class Pemantauan extends Component {
	constructor(props) {
		super(props);
		this.state = {
			log: [],
			pt: {},
			modalPhone: false,
			otpClose: false,
			modalOTP: false,
			otp: "",
			phone: "",
			loadingProses: false,
			// closeVerifikasi:false,
		};
	}

	componentDidMount = async () => {
		const { token } = this.props;
		const log = await getLogPT(token);
		const pt = await getPT(token);
		const kontakPT = await getkontakpt(token);
		this.setState({ log, pt, kontakPT });
		const closeverif = localStorage.getItem(("closeverif"))
		if (kontakPT === undefined && closeverif === null) {
			this.setState({ modalPhone: true })
		}

	};
	otpClose = () => {
		// return location.href = '/pt/pemantauan';71
		this.setState({ modalOTP: false, modalPhone: false })
		localStorage.setItem("closeverif", "true");
	}
	handleSubmitTelepon = async () => {
		this.setState({ loadingProses: true })
		const { token } = this.props
		await createotp({ no_hp: this.state.phone }, token)


		this.setState({ modalPhone: false, modalOTP: true })
	}
	handleOTPagain = async () => {
		const { token } = this.props
		await createotp({ no_hp: this.state.phone }, token)
		this.setState({ modalPhone: false, modalOTP: true })
	}
	handleSubmitOtp = async () => {
		const { token } = this.props
		const create = await createkontak({ otp: this.state.otp, no_hp: this.state.phone }, token)
		if (create.error) {
			swal.fire({
				title: create.error.message,
				icon: "error",
				content: create.error.message,
				confirmButtonColor: "#3e3a8e",
			});
		} else {
			swal.fire({
				title: "Data berhasil dikirim",
				icon: "success",
				confirmButtonColor: "#3e3a8e",
			});
			this.setState({ modalPhone: false, modalOTP: false })
		}

	}
	render() {
		const { log, pt } = this.state;

		return (
			<ContentWrapper unwrap>
				{this.state.kontakPT === undefined &&
					<Modal isOpen={this.state.kontakPT === undefined && this.state.modalPhone} style={{ width: '400px' }} >
						<ModalBody>
							<div className="modalLoginPT-a">
								<img
									className="icon-triangle-onModalPT"
									src="/static/img/Frame_10.png"
								></img>

								<h3 className=" font-color-black">Konfirmasi Nomor Telepon Perguruan Tinggi</h3>
							</div>

							<div className="modalLoginPT-b">
								<label className=" font-weight-bold h6">
									Nomor Telepon :
								</label>
								<div className="border-2">
									<PhoneInput
										country={'id'}
										value={this.state.phone}
										onChange={phone => this.setState({ phone })} />
								</div>
							</div>

							<div>
								<Button className="btn-v2 float-left mr-2 ml-4" style={{ width: "40%" }} color onClick={this.otpClose}>
									<span className=" font-color-black">
										Batal
									</span>
								</Button>
								<Button className="btn-login float-right mr-4" style={{ width: "40%" }} color onClick={this.handleSubmitTelepon}>
									{this.state.loadingProses ?
										(
											<div class="d-flex justify-content-center">
												<span
													class="spinner-border spinner-border-sm text-white"
													role="status"
												></span>
												<span className="font-color-white">
													&nbsp; Diproses...
												</span>
											</div>
										) : (
											<span className="font-color-white">
												Simpan
											</span>
										)}
								</Button>
							</div>
						</ModalBody>

					</Modal>
				}
				<Modal isOpen={this.state.modalOTP} style={{ width: '400px' }} >
					<ModalBody>
						<div className="modalLoginPT-a">
							<img
								className="icon-triangle-onModalPT mt-auto mb-auto"
								src="/static/img/Frame_10.png"
							></img>

							<h3 className=" font-color-black">Masukan Kode OTP</h3>
						</div>

						{/* <div className="modalLoginPT-b"> */}

						<div className=" mt-5 mb-5">
							<OtpInput
								invalid={this.state.error}
								value={this.state.otp}
								onChange={(otp) => { this.setState({ otp }) }}
								numInputs={4}
								renderSeparator={<span className=" font-color-black font-weight-bold mr-2 ml-2">-</span>}
								renderInput={(props) => <input {...props} style={{ width: "50px", height: "50px", textAlign: "center", marginLeft: "auto", marginRight: "auto", borderRadius: "7px", fontSize: "30px" }} />}

							/>
							<p className="  mt-3">
								*Kode OTP terkirim ke nomor WA {this.state.phone}
							</p>
							<p className="  mt-3 ">
								Jika Anda belum menerima kode OTP, <span className=" btn-link" onClick={this.handleOTPagain}>kirimkan ulang kode OTP</span>
							</p>

							<FormFeedback invalid={this.state.error}>
								Kode verifikasi harus diisi
							</FormFeedback>
						</div>

						<div>
							<Button className="btn-v2 float-left mr-2 ml-4" style={{ width: "40%" }} color onClick={this.otpClose}>
								<span className=" font-color-black">
									Batal
								</span>
							</Button>
							<Button className="btn-login float-right mr-4" style={{ width: "40%" }} color onClick={this.handleSubmitOtp}
							>
								<span className=" font-color-white">
									Simpan
								</span>
							</Button>
						</div>
					</ModalBody>

				</Modal>


				{pt?.data ? <Header data={pt.data} /> : <Loader />}
				<div className="p-3">
					<Row>
						{log.data ? (
							<Col xl="9">
								<Timeline data={log.data} />
							</Col>
						) : (
							<Loader />
						)}
						<Col xl="3">{pt.data && <DetailPT data={pt.data} />}</Col>
					</Row>
				</div>
			</ContentWrapper>
		);
	}
}

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