import React, { useEffect, useMemo, useState } from "react";

import { getOrderStatus } from "@utils/getOrderStatus";
import {
	RequestStatusEnum,
	type STATUS_CODE,
} from "../../hooks/apis/useRequestStatus";
import { useTheme } from "../../hooks/useTheme";
import { DoubleChevron, VerifiedCheck } from "../common/Icons";
import { MIcon } from "../common/MIcon";

export const Stepper = ({
	statusCode,
	srcTimeStamp,
	destTimeStamp,
}: {
	statusCode: STATUS_CODE;
	srcTimeStamp?: number;
	destTimeStamp?: number;
}) => {
	const { inProgress, isCompleted, isExpired } = getOrderStatus(statusCode);

	return (
		<div className="bn-h-7 bn-w-full bn-relative">
			<ProgressBar statusCode={statusCode} />

			{!isCompleted && !isExpired && <MovingDots right={inProgress} />}

			<div className="bn-flex bn-justify-between bn-items-center bn-relative">
				<StepIcon icon="wallet" isSuccess />
				<StepIcon
					icon={isExpired ? "error" : "chevron"}
					isSuccess={inProgress || isCompleted}
					timeStamp={srcTimeStamp}
					isExpired={isExpired}
				/>
				<StepIcon icon="wallet" isSuccess={isCompleted} timeStamp={destTimeStamp} />
			</div>
		</div>
	);
};

const StepIcon = ({
	icon,
	isSuccess = false,
	timeStamp,
	isExpired = false,
}: {
	icon?: string;
	isSuccess?: boolean;
	timeStamp?: number;
	isExpired?: boolean;
}) => {
	const theme = useTheme();
	const [height, setHeight] = useState<string>("0");
	const timeStampMemoized = useMemo(() => timeStamp, [timeStamp]);

	useEffect(() => {
		const interval = setInterval(() => {
			if (timeStampMemoized) {
				const timeNow = Date.now() / 1000; // in sec

				const timeStampMs = timeStampMemoized;
				const diff = timeNow - timeStampMs;

				if (diff > 20) setHeight("60%");
				else if (diff > 15) setHeight("45%");
				else if (diff > 10) setHeight("30%");
				else if (diff > 5) setHeight("15%");
			}
		}, 5000);

		return () => {
			clearInterval(interval);
		};
	}, [timeStampMemoized]);

	if (isSuccess) return <VerifiedCheck fill={theme.colors?.success} />;

	if (icon) {
		return (
			<div className="bn-bg-layer-3 bn-w-7 bn-h-7 bn-rounded-full bn-flex bn-items-center bn-justify-center bn-relative bn-overflow-hidden">
				<div
					className="bn-size-full bn-bg-success bn-absolute bn-left-0 bn-bottom-0 bn-w-full"
					style={{ height: height }}
				/>
				{icon === "chevron" ? (
					<DoubleChevron fill={theme.colors?.textPrimary} className="bn-relative" />
				) : (
					<MIcon
						name={icon}
						// biome-ignore format:
						classNames={`${
							isExpired ? "bn-text-fail" : "bn-text-primary"
							} bn-text-[20px] bn-relative`
						}
					/>
				)}
			</div>
		);
	}
};

function getProgressWidth(_statusCode: STATUS_CODE) {
	if (_statusCode < RequestStatusEnum.EXTRACTED) return 0;
	if (_statusCode < RequestStatusEnum.FULFILLED) return "50%";

	// biome-ignore format:
	if (
    _statusCode >= RequestStatusEnum.FULFILLED &&
    _statusCode < RequestStatusEnum.EXPIRED
  )
    return "100%";

	return 0;
}

const ProgressBar = ({ statusCode }: { statusCode: STATUS_CODE }) => {
	const { isExpired } = getOrderStatus(statusCode);

	return (
		<div className="bn-absolute bn-h-0.5 bn-w-[95%] bn-mx-auto bn-my-auto bn-inset-0">
			{/* track */}
			<div className="bn-h-px bn-border-0 bn-border-b-[2.2px] bn-border-dashed bn-border-primary bn-w-full bn-absolute bn-my-auto bn-inset" />
			{isExpired && (
				<div className="bn-h-px bn-border-0 bn-border-b-[2.2px] bn-border-dashed bn-border-fail bn-w-[50%] bn-absolute bn-my-auto bn-inset" />
			)}

			{/* fill */}
			<div
				className="bn-absolute bn-left-0 bn-top-0 bn-h-full bn-w-[100px] bn-bg-success"
				style={{ width: getProgressWidth(statusCode) }}
			/>
		</div>
	);
};

const MovingDots = ({ right = false }: { right?: boolean }) => {
	// biome-ignore format:
	const style = `bn-w-1/2 bn-h-full bn-absolute bn-top-0 bn-overflow-hidden bn-flex bn-items-center bn-mx-2 ${
    right ? "bn-right-0" : "bn-left-0"
  }`;
	return (
		<div className={style}>
			<div className="bn-animate-slide-in-out bn-w-full bn-flex bn-justify-center">
				<div className="bn-w-[55px] bn-flex bn-justify-between">
					<div className="bn-size-[5px] bn-rounded-full bn-bg-success" />
					<div className="bn-size-[5px] bn-rounded-full bn-bg-success" />
					<div className="bn-size-[5px] bn-rounded-full bn-bg-success" />
				</div>
			</div>
		</div>
	);
};
