import React, { type ComponentPropsWithRef, type ReactNode } from 'react';
import { NavLink } from 'react-router';
import { flexRender, useControllable, type FlexRenderable } from '@wener/reaction';
import { clsx } from 'clsx';
import { cn } from '../utils/cn';

export interface TitleTabItem {
	label: ReactNode;
	href?: string;
	icon?: FlexRenderable<any>;
	action?: ReactNode;
	key?: string;
}

export function getTitleTabItemKey(item: TitleTabItem, index: number) {
	return item.key ?? String(index);
}

export const TitleTabList = ({
	className,
	value,
	onValueChange,
	defaultValue,
	title,
	action,
	tabs,
	ref,
	...props
}: Omit<ComponentPropsWithRef<'div'>, 'title'> & {
	title?: ReactNode;
	action?: ReactNode;
	tabs: Array<TitleTabItem>;
	value?: string;
	defaultValue?: string;
	onValueChange?: (value: string) => void;
}) => {
	const [current, setCurrent] = useControllable<string>(value, onValueChange, defaultValue);
	return (
		<div ref={ref} className={cn('flex items-end', className)} {...props}>
			<div
				className={'border-color flex h-full items-center px-2'}
				style={{
					// border-b-[--tab-border]  not works
					borderBottomWidth: 'var(--tab-border,1px)',
				}}
			>
				<h3 className={'text-lg font-medium'}>{title}</h3>
			</div>
			<div role='tablist' className='tabs tabs-lifted tabs-sm'>
				{tabs.map((item, index) => {
					const { label, href, icon } = item;
					const key = getTitleTabItemKey(item, index);
					const content = (
						<>
							{flexRender(icon, { className: 'w-4 h-4' })}
							{label}
						</>
					);
					let isActive = key === current;
					return href ? (
						<NavLink
							to={href}
							role='tab'
							className={({ isActive }) => clsx('tab', isActive && 'tab-active')}
							key={index}
						>
							{content}
						</NavLink>
					) : (
						<a
							role='tab'
							className={clsx('tab', isActive && 'tab-active')}
							key={index}
							onClick={() => {
								setCurrent(key);
							}}
						>
							{content}
						</a>
					);
				})}
			</div>
			<div
				className={'border-color flex-1 border-b'}
				style={{
					// border-b-[--tab-border]  not works
					borderBottomWidth: 'var(--tab-border,1px)',
				}}
			></div>
			{action && (
				<div
					className={'border-color flex items-center self-stretch border-b pr-1'}
					style={{
						borderBottomWidth: 'var(--tab-border,1px)',
					}}
				>
					{action}
				</div>
			)}
		</div>
	);
};