import { Col, Dropdown, Row, Tabs } from "antd";
import { RefObject, useEffect, useRef, useState } from "react";
import OutsideClickHandler from "react-outside-click-handler";
import { useActions, useAppState } from "src/overmind";
import { IOView } from "src/types";
import { NCOLogo } from "./Icons/NCOLogo";
import { UserNewcoinInfo, UserNewcoinPoolsParticipation } from "./UserWidget";

const roundCurrency = (vals: string[]) => {
	const val = vals ? vals[0] : " ";
	const [n, c] = val.split(/ /);
	return n.replace(/\.?0+$/, "") + " " + c;
}

export const Wallet: IOView = () => {
	const state = useAppState();
	const user = state.api.auth.user;
	const ncoBalance = state.newcoin.account;
	const gncoBalance = state.newcoin.mainPool;

	if (!user) return <></>;
	return (
		<div
			className="nl-white-box"
			style={{
				minWidth: "min(450px, 100vh)",
				padding: 0,
			}}
		>
			<div style={{ padding: "70px 40px 40px 40px" }}>
				<p className="text-left header-3 u-margin-bottom-medium">
					{user.username}
				</p>
				<Row gutter={24}>
					<Col
						className="text-left"
						style={{
							fontSize: 40,
							fontWeight: "bold",
						}}
					>
						{roundCurrency(ncoBalance.acc_balances)}
					</Col>
					<Col
						className="text-left"
						style={{
							fontSize: 40,
							fontWeight: "bold",
						}}
					>
						{roundCurrency(gncoBalance.acc_balances)}
					</Col>
				</Row>
			</div>
			<div className="wallet-usernames-wrapper">
				{/* <UserNewcoinInfo user={user} /> */}
				<UserNewcoinPoolsParticipation user={user} />
			</div>
			<div className="u-margin-top-medium">&nbsp;</div>
		</div>
	);
};

export const WalletWidget: IOView = () => {
	// const [visible, setVisible] = useState<boolean>(true);
	const actions = useActions();
	const state = useAppState();

	const setVisible = (v: boolean) => actions.ux.setLayout({ walletShown: v })
	
	// useEffect(() => {
	// 	// setVisible(false);
	// 	actions.ux.setLayout({ walletShown: true  })
	// }, [state.flows.stake.latestMode]);

	return (
		<div>
			<Dropdown
				visible={state.ux.layout.walletShown}
				// onVisibleChange={(val) => setVisible(val)}
				overlayStyle={{}}
				overlay={<Wallet />}
			>
				<div onClick={() => setVisible(!state.ux.layout.walletShown)}>
					<NCOLogo />
				</div>
			</Dropdown>
		</div>
	);
};
