import type { FC } from "react";

import { Button } from "@mantine/core";
import { StateView } from "@wealthledger/ui";
import { useTranslation } from "react-i18next";
import { Link } from "react-router";

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

type AccountPageErrorProps = { code?: string };

const AccountPageError: FC<AccountPageErrorProps> = (props) => {
	const { code } = props;
	const { t } = useTranslation();
	if (isApiErrorCode(code, ApiErrorCode.NotFound))
		return (
			<StateView
				action={(
					<Button component={Link} to="/accounts">
						{t("portfolio.back")}
					</Button>
				)}
				error
				text={t("portfolio.accountUnavailableText")}
				title={t("portfolio.accountUnavailableTitle")}
			/>
		);

	if (
		isApiErrorCode(code, ApiErrorCode.TbankNotConnected)
		|| isApiErrorCode(code, ApiErrorCode.InvalidTbankToken)
	)
		return (
			<StateView
				action={(
					<Button component={Link} to="/settings">
						{t("accounts.openSettings")}
					</Button>
				)}
				error
				text={t("portfolio.connectionErrorText")}
				title={t("portfolio.connectionErrorTitle")}
			/>
		);

	return (
		<StateView
			text={t("states.unavailableText")}
			title={t("states.unavailableTitle")}
		/>
	);
};

export { AccountPageError };