import { createLazyFileRoute } from "@tanstack/react-router";
import { useState } from "react";
import type { Numbers } from "web3";
import { useStore } from "../store";
import { getFormInputValue, toastError, tryWithToast } from "../utils";
import { padToken, web3 } from "../web3";

export const Route = createLazyFileRoute("/pad-token")({
	component: PadTokenPage,
});

function PadTokenPage() {
	const connectedAccount = useStore((state) => state.connectedAccount);
	const [balance, setBalance] = useState("(nothingness)");

	const onBalanceOfFormSubmit: React.FormEventHandler<HTMLFormElement> = async (
		event
	) => {
		event.preventDefault();

		const address = getFormInputValue(
			event.target as HTMLFormElement,
			"address"
		).trim();
		if (!address) {
			toastError("Balance Of", "Enter an address.");
			return;
		}

		await tryWithToast("Balance Of", async () => {
			const balanceBN: Numbers = await padToken.methods
				.balanceOf(address)
				.call();
			setBalance(web3.utils.fromWei(balanceBN, "ether"));
		});
	};

	const onMintFormSubmit: React.FormEventHandler<HTMLFormElement> = async (
		event
	) => {
		event.preventDefault();

		if (!connectedAccount) {
			toastError("Mint", "Connect your wallet first.");
			return;
		}

		const to = getFormInputValue(event.target as HTMLFormElement, "to").trim();
		if (!to) {
			toastError("Mint", "Enter a target address.");
			return;
		}

		const amount = getFormInputValue(
			event.target as HTMLFormElement,
			"amount"
		).trim();
		if (!amount) {
			toastError("Mint", "Enter an amount.");
			return;
		}

		await tryWithToast("Mint", async () => {
			await padToken.methods
				.mint(to, web3.utils.toWei(amount, "ether"))
				.send({ from: connectedAccount });
		});
	};

	return (
		<div className="container mx-auto p-4 grid md:grid-cols-2 xl:grid-cols-3 gap-4">
			<div className="card bg-base-200">
				<div className="card-body items-start">
					<h2 className="text-2xl font-bold">Balance Of</h2>
					<form onSubmit={onBalanceOfFormSubmit}>
						<input
							type="text"
							name="address"
							className="input"
							placeholder="Address"
							required
							minLength={42}
							maxLength={42}
						/>
						<button type="submit" className="btn btn-primary">
							Get
						</button>
						<div>
							<span className="font-bold">Balance:</span> {balance} PAD
						</div>
					</form>
				</div>
			</div>

			<div className="card bg-base-200">
				<div className="card-body items-start">
					<h2 className="text-2xl font-bold">Mint</h2>
					<form onSubmit={onMintFormSubmit}>
						<input
							type="text"
							name="to"
							className="input"
							placeholder="To"
							required
							minLength={42}
							maxLength={42}
						/>
						<input
							type="number"
							name="amount"
							className="input"
							placeholder="Amount"
							required
						/>
						<button type="submit" className="btn btn-primary">
							Mint
						</button>
					</form>
				</div>
			</div>
		</div>
	);
}