import type { FC } from "react";

import { Anchor, Skeleton, Stack, Text, Title } from "@mantine/core";
import { LoadingSkeleton } from "@wealthledger/ui";
import { useTranslation } from "react-i18next";
import { Link } from "react-router";

import { ApiErrorCode, isApiErrorCode } from "@/shared/api";

type InstrumentPageStateProps = {
	code?: string;
	kind: "bond" | "stock";
	loading: boolean;
};

const InstrumentPageState: FC<InstrumentPageStateProps> = (props) => {
	const { code, kind, loading } = props;
	const { t } = useTranslation();
	if (loading) return (
		<LoadingSkeleton label={t(`${kind}.loading`)}>
			<Stack>
				<Skeleton h={110} />

				<Skeleton h={350} />

				<Skeleton h={170} />
			</Stack>
		</LoadingSkeleton>
	);

	const ambiguousCode = kind === "stock"
		? ApiErrorCode.StockTickerAmbiguous
		: ApiErrorCode.BondTickerAmbiguous;

	let message = t(`${kind}.unavailableText`);
	if (isApiErrorCode(code, ambiguousCode))
		message = t(`${kind}.ambiguousTicker`);
	if (
		isApiErrorCode(code, ApiErrorCode.TbankNotConnected)
		|| isApiErrorCode(code, ApiErrorCode.InvalidTbankToken)
	)
		message = t(`${kind}.connect`);

	return (
		<Stack role="alert">
			<Title order={1}>{t(`${kind}.unavailable`)}</Title>

			<Text>{message}</Text>

			<Anchor component={Link} to={`/${kind}s`}>
				{t(`${kind}.backToSearch`)}
			</Anchor>

			<Anchor component={Link} to="/settings">
				{t("accounts.openSettings")}
			</Anchor>
		</Stack>
	);
};

export { InstrumentPageState };