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";
import { ReadRetryButton, type ReadRetryProps } from "@/shared/ui";

type AccountsPageErrorProps = {
	code?: string;
	readRetry?: ReadRetryProps;
};

const AccountsPageError: FC<AccountsPageErrorProps> = (props) => {
	const { code } = props;
	const { t } = useTranslation();

	const settingsAction = (
		<Button component={Link} to="/settings" variant="light">
			{t("accounts.openSettings")}
		</Button>
	);

	if (isApiErrorCode(code, ApiErrorCode.TbankNotConnected))
		return (
			<StateView
				action={settingsAction}
				error
				text={t("accounts.notConnectedText")}
				title={t("accounts.notConnectedTitle")}
			/>
		);
	if (isApiErrorCode(code, ApiErrorCode.InvalidTbankToken))
		return (
			<StateView
				action={settingsAction}
				error
				text={t("accounts.invalidTokenText")}
				title={t("accounts.invalidTokenTitle")}
			/>
		);

	const retry = props.readRetry?.exhausted
		? (
				<ReadRetryButton
					onRetry={props.readRetry.onRetry}
					retrying={props.readRetry.retrying}
				/>
			)
		: undefined;

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

export { AccountsPageError };