import React, { Component } from "react";
import PropTypes from "prop-types";
import { Collapse, Dropdown, DropdownMenu, DropdownToggle, DropdownItem, UncontrolledDropdown, ModalHeader, ModalBody, ModalFooter, Modal, FormFeedback, Button } from "reactstrap";
import classNames from 'classnames';
import PhoneInput from 'react-phone-input-2'
import 'react-phone-input-2/lib/style.css'
import OtpInput from 'react-otp-input';
import { connect } from "react-redux";
import { createotp, getkontakpt, createkontak } from "../../actions/auth";
import swal from "sweetalert2";




class SidebarUserBlock extends Component {
	state = {
		showUserBlock: true,
		user: {},
		role: {},
		ddOpen: false,
		ddselected: false,
		phone: "",
		otp: "",
		modalOTP: false,
		modalPhone: false
	};

	componentDidMount = async () => {
		const { token } = this.props;
		const user = this.props.user;

		const kontakPT = await getkontakpt(token);
		const oldPhone = kontakPT?.data.map((data) => (data.no_hp)).toString()
		this.setState({ user, role: user.role });
		if (oldPhone) {
			this.setState({ phone: oldPhone })
		}
	}

	componentDidUpdate(oldProps) {
		if (oldProps.showUserBlock !== this.props.showUserBlock) {
			this.setState({ showUserBlock: this.props.showUserBlock });
		}
	}
	toggleDropDown = () => this.setState({
		ddOpen: !this.state.ddOpen
	})
	toggleDropItem = () =>
		this.setState({
			ddselected: !this.state.ddselected
		})
	handleSubmitTelepon = async () => {
		this.setState({ loadingProses: true })
		const { token } = this.props
		await createotp({ no_hp: this.state.phone }, token)


		this.setState({ modalPhone: false, modalOTP: true })
	}

	otpClose = () => {
		this.setState({ modalOTP: false, ddselected: false })
		// localStorage.setItem("closeverif", "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({ ddselected: false, modalOTP: false })
		}

	}
	render() {
		const { user, role } = this.state;
		return (
			<Collapse id="user-block" isOpen={this.state.showUserBlock}>
				<Modal isOpen={this.state.ddselected} style={{ width: '400px' }}>
					<ModalBody>
						<div className="modalLoginPT-a">
							<img
								className="icon-triangle-onModalPT mt-0"
								src="/static/img/Frame_10.png"
							></img>

							<h4 className=" font-color-black mt-1">Edit Nomor Telepon Perguruan Tinggi</h4>
						</div>

						<div className="modalLoginPT-b">
							<label className=" font-weight-bold h6">
								Nomor Telepon :
							</label>
							<div className="border-2">
								<PhoneInput
									country={'id'}
									value={this.state.kontakPT?.data.map((data) => (data.no_hp)) || this.state.phone}
									onChange={phone => this.setState({ phone })} />
							</div>
						</div>
						<div className="">
							<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>
							<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">
									Kirim
								</span>
							</Button>
						</div>
					</ModalBody>

				</Modal>
				<div>
					{role.id === 2022 ? (
						<div className="item user-block">
							{/* User picture */}
							<div className="user-block-picture">
								<div className="user-block-status">
									<img className="rounded-circle" src={role.id === 2022 ? "/static/img/univ-avatar.png" : "/static/img/logo-single.png"} alt="Avatar" width="60" height="60" />
									<div className="circle bg-success circle-lg"></div>
								</div>
							</div>
							{/* Name and Job */}
							<div className="user-block-info">
								<span className="user-block-name">
									<div className="col ">
										<div className=" d-inline-flex justify-content-center">
											<span className="font-color-black font-weight-bold text-center">{user.nama}</span>
										</div>
										<div className=" d-inline-flex ml-1">
											<Dropdown isOpen={this.state.ddOpen} toggle={this.toggleDropDown}>
												<DropdownToggle data-toggle="dropdown" tag="span">
													<span style={{ width: "20px" }} >
														<img className="" src="/static/img/Down.png"></img>
													</span>
												</DropdownToggle>
												<DropdownMenu positionFixed={true}  >
													<DropdownItem onClick={this.toggleDropItem}>
														<span className=" font-color-black font-weight-bold">
															Edit Nomor Telepon
														</span>
													</DropdownItem>
												</DropdownMenu>
											</Dropdown>
										</div>


									</div>
								</span>
								<span className="user-block-role">{role.nama}</span>
							</div>
						</div>
					) :
						(
							<div className="item user-block">
								{/* User picture */}
								<div className="user-block-picture">
									<div className="user-block-status">
										<img className="rounded-circle" src={role.id === 2022 ? "/static/img/univ-avatar.png" : "/static/img/logo-single.png"} alt="Avatar" width="60" height="60" />
										<div className="circle bg-success circle-lg"></div>
									</div>
								</div>
								{/* Name and Job */}
								<div className="user-block-info">
									<span className="user-block-name">
										<div className="col ">
											<div className=" d-inline-flex justify-content-center">
												<h6 className="font-color-black font-weight-bold text-center">{user.nama}</h6>
											</div>
										</div>
									</span>
									<span className="user-block-role">{role.nama}</span>
								</div>
							</div>
						)}

				</div>
			</Collapse >
		);
	}
}

SidebarUserBlock.propTypes = {
	showUserBlock: PropTypes.bool,
};

const mapStateToProps = (state) => ({ showUserBlock: state.settings.showUserBlock, user: state.user });

export default connect(mapStateToProps)(SidebarUserBlock);