import React, { useCallback, useEffect, useState } from 'react';
import Moment from 'react-moment';
import { IoArrowDownOutline, IoArrowForwardOutline } from 'react-icons/io5';
import { GiTwoCoins } from 'react-icons/gi';
import { BiError } from 'react-icons/bi';

import AppHeader from '../layouts/AppHeader';
import DataService from '../../services/db';
import { APP_CONSTANTS } from '../../constants';

const { CHARGE_TYPES } = APP_CONSTANTS;

export default function Main(props) {
	const hash = props.match.params.hash;
	const [tx, setTx] = useState({});
	const [tokenDetails, setTokenDetails] = useState(null);

	const reorganizeTxn = useCallback(txn => {
		if (!txn) return txn;
		let t = txn;
		if (t.type === 'issued') {
			t.name = `Token sent to:`;
			t.phone = `${t.to}`;
			t.icon = (
				<div className="iconbox bg-success">
					<GiTwoCoins className="ion-icon" />
				</div>
			);
		}

		if (t.type === 'send') {
			t.name = 'Send Tokens';
			t.icon = (
				<div className="iconbox bg-warning">
					<IoArrowForwardOutline className="ion-icon" />
				</div>
			);
		}
		if (t.type === 'receive') {
			t.name = 'Received Tokens';
			t.icon = (
				<div className="iconbox bg-primary">
					<IoArrowDownOutline className="ion-icon" />
				</div>
			);
		}
		if (t.type === CHARGE_TYPES.REDEEMED_PACKAGE) {
			t.name = 'NFT Redeemed';
			t.icon = (
				<div className="iconbox bg-primary">
					<IoArrowDownOutline className="ion-icon" />
				</div>
			);
		}
		if (t.type === CHARGE_TYPES.REDEEMED_TOKEN) {
			t.name = 'Token Redeemed';
			t.icon = (
				<div className="iconbox bg-primary">
					<IoArrowDownOutline className="ion-icon" />
				</div>
			);
		}
		if (t.type === CHARGE_TYPES.TOKEN_RECIEVED) {
			t.name = 'Token Recieved';
			t.icon = (
				<div className="iconbox bg-primary">
					<IoArrowDownOutline className="ion-icon" />
				</div>
			);
		}
		if (t.type === CHARGE_TYPES.TOKEN_SENT) {
			t.name = 'Token Sent';
			t.icon = (
				<div className="iconbox bg-primary">
					<IoArrowForwardOutline className="ion-icon" />
				</div>
			);
		}
		if (t.type === CHARGE_TYPES.NFT_RECIEVED) {
			t.name = 'NFT Recieved';
			t.icon = (
				<div className="iconbox bg-primary">
					<IoArrowDownOutline className="ion-icon" />
				</div>
			);
		}
		if (t.type === CHARGE_TYPES.NFT_SENT) {
			t.name = 'NFT Sent';
			t.icon = (
				<div className="iconbox bg-primary">
					<IoArrowForwardOutline className="ion-icon" />
				</div>
			);
		}

		if (t.status === 'error' || t.status === 'fail') {
			t.icon = (
				<div className="iconbox bg-danger">
					<BiError className="ion-icon" />
				</div>
			);
		}

		t.hash = `${t.hash.slice(0, 10)}....`;
		t.to = `${t.to.slice(0, 10)}....`;
		return t;
	}, []);

	const getTokenDetails = useCallback(async tokenId => {
		if (!tokenId) return;
		const details = await DataService.getNft(tokenId);
		if (!details) return;
		setTokenDetails(details);
	}, []);

	const getTxnDetails = useCallback(async () => {
		if (!hash) return;

		let tnx = await DataService.getTx(hash);
		if (!tnx) return;

		tnx = reorganizeTxn(tnx);

		await getTokenDetails(tnx?.tokenId);

		setTx(tnx);
	}, [hash, reorganizeTxn, getTokenDetails]);

	useEffect(() => {
		let isMounted = true;
		if (isMounted) getTxnDetails();

		return () => {
			isMounted = false;
			setTx({});
		};
	}, [getTxnDetails]);

	return (
		<>
			<AppHeader currentMenu="Tx Details" />
			<div id="appCapsule" className="full-height">
				<div className="section mt-2 mb-2">
					<div className="listed-detail mt-3">
						<div className="icon-wrapper">{tx.icon}</div>
						<h3 className="text-center mt-2">{tx.name}</h3>
					</div>

					<ul className="listview flush transparent simple-listview no-space mt-3">
						<li>
							<strong>Status</strong>
							<span
								className={tx.status === 'success' ? 'text-success' : 'text-danger'}
								style={{ textTransform: 'capitalize' }}
							>
								{tx.status}
							</span>
						</li>
						<li>
							<strong>To</strong>
							<span>{tx.to}</span>
						</li>
						<li>
							<strong>Tx Hash</strong>
							<span style={{ overflow: 'hidden' }}>{tx.hash}</span>
						</li>
						<li>
							<strong>Date</strong>
							<span>
								<Moment date={tx.timestamp} format="YYYY/MM/DD hh:mm a" />
							</span>
						</li>
						<li>
							<strong>Amount</strong>
							<h3 className="m-0">{tx.amount}</h3>
						</li>
						{tokenDetails && (
							<>
								<li>
									<strong>Token Name</strong>
									<h3 className="m-0">{tokenDetails?.name}</h3>
								</li>
								<li>
									<strong>Token Description</strong>
									<h3 className="m-0">{tokenDetails?.description}</h3>
								</li>
								<li>
									<strong>Token Image</strong>
									<img
										src={tokenDetails?.imageUri || '/assets/img/brand/icon-72.png'}
										width="75"
										height="75"
										alt="asset"
										className="image"
									/>
								</li>
							</>
						)}
					</ul>
				</div>
			</div>
		</>
	);
}