'use client';

import { ServerPublic } from '@answeroverflow/api/router/types';
import { ServerIcon } from '@answeroverflow/ui/server-icon';
import { Button } from '@answeroverflow/ui/ui/button';
import {
	DropdownMenu,
	DropdownMenuContent,
	DropdownMenuItem,
	DropdownMenuTrigger,
} from '@answeroverflow/ui/ui/dropdown-menu';
import { Link } from '@answeroverflow/ui/ui/link';
import { trpc } from '@answeroverflow/ui/utils/client';
import { useParams } from 'next/navigation';
import React from 'react';
import { HiChevronDown, HiChevronUp } from 'react-icons/hi';
import { LiaPlusCircleSolid } from 'react-icons/lia';
import { demoServerData } from './mock';

const ServerSelectRow = (props: {
	server: Pick<ServerPublic, 'id' | 'name' | 'icon'>;
}) => (
	<div
		className="flex items-center space-x-2 text-left"
		style={{
			maxWidth: '200px',
		}}
	>
		<ServerIcon server={props.server} size={40} />
		<span>{props.server.name}</span>
	</div>
);

export function ServerSelectDropdown() {
	const params = useParams();
	const serverId = params?.serverId as string | undefined;
	const { data } = trpc.auth.getServersForOnboarding.useQuery();
	const serversWithDashboard = data?.filter((server) => server.hasBot);
	const selectedServer =
		serverId === '1000'
			? demoServerData
			: (serversWithDashboard?.find((x) => x.id === serverId) ??
				serversWithDashboard?.[0]);

	return (
		<div>
			<DropdownMenu modal={false}>
				<DropdownMenuTrigger asChild>
					{selectedServer ? (
						<Button
							className="flex items-center space-x-2 rounded-none px-4 py-7"
							variant={'ghost'}
						>
							<ServerSelectRow server={selectedServer} />
							<div className="grid grid-cols-1 grid-rows-2">
								<HiChevronUp className="h-4 w-4" />
								<HiChevronDown className="h-4 w-4" />
							</div>
						</Button>
					) : (
						<span>No servers with bot found</span>
					)}
				</DropdownMenuTrigger>
				<DropdownMenuContent>
					{serversWithDashboard?.map((server) => (
						<DropdownMenuItem key={server.id} asChild>
							<Link href={`/dashboard/${server.id}`}>
								<ServerSelectRow server={server} />
							</Link>
						</DropdownMenuItem>
					))}
					<DropdownMenuItem>
						<Link
							href={'/onboarding'}
							className={'flex w-full items-center gap-2 text-left'}
						>
							<LiaPlusCircleSolid className={'h-[40px] w-[40px]'} />
							Add new
						</Link>
					</DropdownMenuItem>
				</DropdownMenuContent>
			</DropdownMenu>
		</div>
	);
}
