"use client";
import { Button } from "@/components/ui/button";
import {
	Dialog,
	DialogContent,
	DialogDescription,
	DialogFooter,
	DialogHeader,
	DialogTitle,
	DialogTrigger,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import type { IUserData } from "@/interfaces/userdata.interface";

import { CopyButton } from "@/components/ui/copy-button";
import { doDisconnect } from "@/services/account.handler";
import { Bitcoin, Fingerprint, Key, Landmark, Unplug, User, Wallet } from "lucide-react";
import Link from "next/link";
import type React from "react";

export function AccountInfo({
	userData,
	setUserData,
	isDisconnected,
}: {
	userData: IUserData;
	setUserData: React.Dispatch<React.SetStateAction<IUserData | undefined>>;
	isDisconnected: boolean;
}) {
	if (isDisconnected) {
		return (
			<div className={"flex flex-col justify-center items-center h-10 p-2 text-xs mt-2"}>
				<div
					className={
						"flex flex-row justify-center items-center gap-1 text-destructive to-red-900 animate-pulse"
					}
				>
					<Unplug className={"w-4"} />
					<p>Disconnected</p>
				</div>
				<div>
					<Link
						href={"/auth"}
						className={
							"hover:text-primary flex justify-evenly items-center gap-1 p-1 text-nowrap"
						}
					>
						<Key className={"w-3"} /> Link account
					</Link>
				</div>
			</div>
		);
	}

	return (
		<Dialog>
			<DialogTrigger asChild>
				<Button variant="outline" className={"gap-2 px-2"}>
					<p>{userData.firstName}</p>
					<User />
				</Button>
			</DialogTrigger>
			<DialogContent className="sm:max-w-[425px]">
				<DialogHeader>
					<DialogTitle>{`Your account - ${userData.firstName} ${userData.lastName}`}</DialogTitle>
					<DialogDescription>{userData.city}</DialogDescription>
				</DialogHeader>
				<div className={"flex flex-col items-center justify-center w-full"}>
					<div className={"flex flex-col justify-evenly items-center gap-2"}>
						<div
							className={
								"flex flex-col md:flex-row gap-2 justify-center md:justify-evenly items-start md:items-center w-full"
							}
						>
							<div
								className={
									"flex gap-1 justify-start md:justify-center items-center mx-auto w-full md:w-fit"
								}
							>
								<Landmark />
								<p className={"rounded bg-accent text-accent-foreground p-1"}>
									{userData.dollarAvailables} $
								</p>
							</div>
							<div
								className={
									"flex gap-1 justify-start md:justify-center items-center mx-auto w-full md:w-fit"
								}
							>
								<Bitcoin />
								<p className={"rounded bg-accent text-accent-foreground p-1"}>
									You dont have cryptos.
								</p>
							</div>
						</div>
						<div
							className={"flex flex-col gap-3 justify-center items-start mx-auto mt-4"}
						>
							<div className={"flex flex-row text-nowrap flex-nowrap gap-1 text-primary"}>
								<Fingerprint />
								<h2>Your identity</h2>
							</div>
							<div
								className={
									"font-light text-xs md:text-sm flex flex-row items-center justify-start gap-1 bg-accent p-2 rounded"
								}
							>
								<p>{userData.id}</p>
								<CopyButton value={userData.id} />
							</div>
						</div>
					</div>
				</div>
				<DialogFooter>
					<Button variant={"secondary"} className={"gap-2 px-2"}>
						<Wallet />
						<p>My wallet</p>
					</Button>
					<Button
						variant={"destructive"}
						className={"gap-2 px-2"}
						onClick={() => doDisconnect()}
					>
						<Unplug />
						<p>Disconnect</p>
					</Button>
				</DialogFooter>
			</DialogContent>
		</Dialog>
	);
}