import { useSelector } from "react-redux";

import { TokensStacked } from "@components/common/TokensStacked";
import { Tooltip } from "@components/common/Tooltip";
import type {
	RequestStatus,
	StatusEndPoint,
} from "@hooks/apis/useRequestStatus";
import type { ReduxStateType } from "@store/types";
import { adjustDecimals } from "@utils/adjustDecimals";
import { useMappedChainData } from "../../hooks/useMappedChainData";
import { useTheme } from "../../hooks/useTheme";
import { formatValue } from "../../utils/formatValue";
import { getBorderRadius } from "../../utils/getBorderRadius";
import { getRequestStatusData } from "../../utils/getRequestStatusData";
import { MIcon } from "../common/MIcon";
import { OrderId } from "./OrderId";
import { Stepper } from "./Stepper";

export const InfoSection = ({
	requestData,
	openFaq,
	openShare,
}: {
	requestData: RequestStatus;
	openFaq: () => void;
	openShare: () => void;
}) => {
	const theme = useTheme();
	const mappedChainData = useMappedChainData();
	const {
		statusCode,
		requestHash,
		primaryInput,
		primaryOutput,
		output,
		srcTimestamp,
		destTimestamp,
	} = getRequestStatusData(requestData);

	return (
		<div
			className="bn-bg-layer-2 bn-px-3 bn-py-2"
			style={{ borderRadius: getBorderRadius(theme.borderRadius, 8) }}
		>
			<Stepper
				statusCode={statusCode}
				destTimeStamp={destTimestamp}
				srcTimeStamp={srcTimestamp}
			/>

			{/* @fixme: remove this later */}
			{primaryInput && (
				<div className="bn-mt-[14px] bn-flex bn-justify-between bn-items-center">
					<TokenDetails
						chainName={mappedChainData?.[primaryInput?.chainId]?.name ?? ""}
						tokenData={[primaryInput]}
					/>
					<TokenDetails
						chainName={mappedChainData?.[primaryOutput?.chainId]?.name ?? ""}
						tokenData={output}
						rtl
					/>
				</div>
			)}

			<div className="bn-my-[14px] bn-border-0 bn-border-b-2 bn-border-solid bn-border-primary" />

			<div className="bn-flex bn-justify-between bn-items-center">
				<OrderId id={requestHash} />

				<div>
					<HelperButton icon="share" onClick={openShare} />
					<HelperButton icon="question_mark" onClick={openFaq} />
				</div>
			</div>
		</div>
	);
};

const HelperButton = ({
	icon,
	onClick,
}: { icon: string; onClick: () => void }) => {
	return (
		<button
			type="button"
			onClick={onClick}
			className="bn-w-9 bn-h-9 bn-rounded-full bn-ml-2 bn-bg-layer-3 bn-border-none bn-text-primary bn-inline-flex bn-justify-center bn-items-center bn-cursor-pointer"
		>
			<MIcon name={icon} classNames="bn-text-xl" />
		</button>
	);
};

const TokenDetails = ({
	chainName,
	tokenData,
	rtl = false,
}: { chainName: string; tokenData: StatusEndPoint[]; rtl?: boolean }) => {
	const locale = useSelector((state: ReduxStateType) => state.settings.language);
	// biome-ignore format:
	const style = `bn-flex bn-flex-col ${rtl ? 'bn-items-end' : 'bn-items-start'}`
	// biome-ignore format:
	const label = `${rtl ? "To" : 'From'} ${chainName}`

	function getAmount(endpoint: StatusEndPoint) {
		// For output token
		if (rtl) {
			if (endpoint.fulfilledAmount && endpoint.fulfilledAmount !== "0") {
				return endpoint.fulfilledAmount;
			}
			return endpoint.minAmountOut || endpoint.amount;
		}

		// For input token
		return endpoint.amount || "0";
	}

	return (
		<div className={style}>
			<p className="bn-text-[13px] bn-font-normal bn-text-secondary bn-mb-1">
				{label}
			</p>
			{/* biome-ignore format: */}
			<div className={`bn-flex bn-items-center bn-space-x-2 ${rtl ? 'bn-flex-row-reverse bn-space-x-reverse': 'bn-flex-row'}`}>
				<div className="bn-size-fit bn-flex bn-items-center">
					<TokensStacked endpoints={tokenData} small/>
				</div>

				<div className="bn-flex bn-items-center bn-space-x-2">
					{tokenData?.map((endpoint, index) => {
						const amount = formatValue(
							getAmount(endpoint),
							endpoint.token.decimals,
						);
						return (
							<p
							className="bn-text-primary bn-font-medium bn-text-[15px] bn-aeonik-font"
							// biome-ignore format:
							key={`${endpoint.minAmountOut}-${index}`}
							>
								{index !== 0 && "&"}{" "}
								<Tooltip content={amount}>
									<span>{adjustDecimals(amount, 2, locale)}</span>
								</Tooltip>{" "}
								{endpoint.token.symbol}
							</p>
						);
					})}
				</div>
			</div>
		</div>
	);
};
