import { useSelector } from "react-redux";

import { OrderId } from "@components/InFlight/OrderId";
import { MIcon } from "@components/common/MIcon";
import { TokenDetails } from "@components/common/TokenDetails";
import {
	type RequestStatus,
	RequestStatusEnum,
	type STATUS_CODE,
	type StatusEndPoint,
} from "@hooks/apis/useRequestStatus";
import { useTheme } from "@hooks/useTheme";
import type { ReduxStateType } from "@store/types";
import { formatValue } from "@utils/formatValue";
import { getBorderRadius } from "@utils/getBorderRadius";
import { getOrderStatus } from "@utils/getOrderStatus";
import { getRequestStatusData } from "@utils/getRequestStatusData";

export const HistoryItem = ({
	data,
	onClick,
}: { data: RequestStatus; onClick: () => void }) => {
	const theme = useTheme();
	const locale = useSelector((state: ReduxStateType) => state.settings.language);
	const { statusCode, primaryInput, primaryOutput, orderTimestamp, requestHash } =
		getRequestStatusData(data);

	const srcToken = primaryInput?.token;
	const formattedFromAmount = formatValue(
		primaryInput.amount ?? "0",
		srcToken?.decimals,
	);

	function getAmount(endpoint: StatusEndPoint) {
		// Hanlidng both input and output amounts
		return (
			(endpoint?.fulfilledAmount || endpoint?.minAmountOut) ?? endpoint?.amount
		);
	}

	const destToken = primaryOutput?.token;
	const formattedToAmount = formatValue(
		getAmount(primaryOutput),
		destToken?.decimals,
	);

	const date = new Date(orderTimestamp);
	const options: Intl.DateTimeFormatOptions = {
		day: "numeric",
		month: "short",
		year: "2-digit",
	};

	// @fixme: type error
	// biome-ignore format:
	const dateString = `${date.toLocaleDateString(
		locale,
		options
	)}, ${date.toLocaleTimeString(
		locale,
		{
			hour: "2-digit",
			minute: "2-digit",
	})}`;

	return (
		<button
			type="button"
			onClick={onClick}
			className="bn-w-full bn-bg-layer-2 bn-border-0 bn-p-4 bn-cursor-pointer bn-space-y-2.5"
			style={{ borderRadius: getBorderRadius(theme.borderRadius, 8) }}
			disabled={statusCode === RequestStatusEnum.EXPIRED}
		>
			<div className="bn-flex bn-items-center bn-justify-between">
				<TokenDetails
					token={primaryInput?.token}
					amount={formattedFromAmount}
					showTokens
				/>
				<TokenDetails
					token={primaryOutput?.token}
					amount={formattedToAmount}
					showTokens
					rtl
				/>
			</div>

			<div className="bn-flex bn-items-center bn-justify-between bn-border-0 bn-border-t bn-border-solid bn-border-primary bn-pt-2.5">
				<OrderId id={requestHash} showIcon={false} />
				<div className="bn-flex bn-flex-col bn-items-end">
					<span className="bn-text-secondary bn-text-sm bn-text-normal bn-text-right bn-mb-1">
						{dateString}
					</span>
					<Status statusCode={statusCode} />
				</div>
			</div>
		</button>
	);
};

function getStatusLabel(statusCode: STATUS_CODE) {
	const { isCompleted, isExpired } = getOrderStatus(statusCode);

	if (isExpired) return "expired";
	if (isCompleted) return "completed";
	return "in progress";
}

function getIconName(statusCode: STATUS_CODE) {
	const { isExpired, isCompleted } = getOrderStatus(statusCode);

	if (isExpired) return "error";
	if (isCompleted) return "verified";
	return "donut_large";
}

function getIconColor(statusCode: STATUS_CODE) {
	const { isCompleted, isExpired } = getOrderStatus(statusCode);

	if (isExpired) return "bn-text-fail";
	if (isCompleted) return "bn-text-success";
	return "bn-text-accent2";
}

const Status = ({ statusCode }: { statusCode: STATUS_CODE }) => {
	const { isPending } = getOrderStatus(statusCode);
	const color = getIconColor(statusCode);

	// biome-ignore format:
	const style = `bn-flex bn-items-center bn-space-x-1 ${color}`

	return (
		<div className={style}>
			{/* biome-ignore format: */}
			<MIcon name={getIconName(statusCode)} classNames={`bn-text-base ${color} ${isPending ? 'bn-animate-spin' : ''}`} />
			<span className="bn-capitalize bn-font-medium">
				{getStatusLabel(statusCode)}
			</span>
		</div>
	);
};
