import { MIcon } from "@components/common/MIcon";

export type Tab = {
	id: "auto" | "manual";
	isActive: boolean;
	onClick: () => void;
	enabled: boolean;
};

export const HistoryTabsHeader = ({
	tabs,
	setPage,
	pageNumber,
	totalPages,
}: {
	tabs: Tab[];
	setPage: (value: number) => void;
	pageNumber: number;
	totalPages: number;
}) => {
	return (
		<div className="bn-border-b bn-border-solid bn-border-subtle bn-flex bn-items-center bn-justify-between bn-px-4 bn-mb-[14px]">
			<div className="bn-space-x-6">
				{tabs
					.filter((tab) => tab.enabled)
					?.map((tab) => (
						<Tab label={tab.id} onClick={tab.onClick} active={tab.isActive} key={tab.id} />
					))}
			</div>
			<Pagination
				leftClick={() => setPage(pageNumber - 1)}
				rightClick={() => setPage(pageNumber + 1)}
				currentPage={pageNumber}
				totalPages={totalPages}
			/>
		</div>
	);
};

const Tab = ({
	onClick,
	label = "auto",
	active,
}: { onClick: () => void; label: string; active: boolean }) => {
	// biome-ignore format:
	const style = `${active ? 'bn-text-theme' : 'bn-text-secondary'} bn-text-base bn-font-medium bn-capitalize bn-h-12 bn-relative bn-px-1`
	return (
		<button onClick={onClick} type="button" className={style}>
			{label}
			{active && (
				<div className="bn-h-[3px] bn-rounded-full bn-w-full bn-bg-theme bn-absolute bn-bottom-0 bn-left-0" />
			)}
		</button>
	);
};

const Pagination = ({
	leftClick,
	rightClick,
	currentPage,
	totalPages,
}: {
	leftClick: () => void;
	rightClick: () => void;
	currentPage: number;
	totalPages: number;
}) => {
	const btnStyle =
		"bn-bg-layer-2 bn-size-6 bn-rounded-full bn-flex bn-justify-center bn-items-center group";
	return (
		<div className="bn-text-primary bn-flex bn-items-center bn-space-x-4">
			<button
				type="button"
				onClick={leftClick}
				disabled={currentPage === 1}
				className={btnStyle}
			>
				{/* biome-ignore format:  */}
				<MIcon name="chevron_left" classNames={`${currentPage === 1 ? 'bn-text-secondary' : 'bn-text-primary'}`} />
			</button>
			<span className="bn-text-secondary bn-text-base bn-font-medium">
				<span className="bn-text-primary">{currentPage}</span> of {totalPages}
			</span>
			<button
				type="button"
				onClick={rightClick}
				disabled={currentPage === totalPages}
				className={btnStyle}
			>
				{/* biome-ignore format:  */}
				<MIcon name="chevron_right" classNames={`${currentPage === totalPages ? 'bn-text-secondary' : 'bn-text-primary'}`} />
			</button>
		</div>
	);
};
