import Link from 'next/link'
import classNames from 'classnames'
import type { HTMLAttributes, LiHTMLAttributes, ReactNode } from 'react'
import './style.scss'

interface BreadcrumbItemProps extends LiHTMLAttributes<HTMLLIElement>{
	maxWidth?: `${number}px` | `${number}em`
	icon?: ReactNode
	current?: boolean
	text: string
	href: string
}

interface BreadcrumbProps extends HTMLAttributes<HTMLElement> {
	itemsCanWrap?: boolean
	ariaLabel?: string
	children: ReactNode
}

function Root({
	itemsCanWrap = true,
	ariaLabel = 'breadcrumbs',
	children,
	...rest
}: BreadcrumbProps) {
	return (
		<nav
			className={classNames(
				'hds-breadcrumb',
				{ ['hds-breadcrumb--items-can-wrap']: itemsCanWrap }
			)}
			aria-label={ariaLabel}
			{...rest}
		>
			<ol className="hds-breadcrumb__list">{children}</ol>
		</nav>
	)
}

function Item({
	maxWidth,
	current,
	icon,
	text,
	href,
	...rest
}: BreadcrumbItemProps) {
	return (
		<li
			className="hds-breadcrumb__item"
			style={maxWidth ? { maxWidth } : {}}
			{...rest}
		>
			{current ? (
				<div className="hds-breadcrumb__current">
					<ItemContent icon={icon} text={text} />
				</div>
			) : (
				<Link className="hds-breadcrumb__link" href={href}>
					<ItemContent icon={icon} text={text} />
				</Link>
			)}
		</li>
	)
}

function ItemContent({
	icon,
	text,
}: Pick<BreadcrumbItemProps, 'icon' | 'text'>) {
	return (
		<>
			{icon && <div className="hds-breadcrumb__icon">{icon}</div>}

			<span className="hds-breadcrumb__text">{text}</span>
		</>
	)
}

export {
	Root,
	Item
}

// @TODO: complete <Truncation /> upon MenuPrimitive completion
// it should look something like this:

// function Truncation({ ariaLabel, ...rest }: {ariaLabel: string}) {
// 	const {isOpen, onClickToggle} = useMenuPrimitive()
// 	return (
// 		<li className="hds-breadcrumb__item hds-breadcrumb__item--is-truncation" {...rest}>
// 			<MenuPrimitive>
// 				<MenuPrimitive.Toggle>
//       		<button
//         		type="button"
// 						className="hds-breadcrumb__truncation-toggle"
// 						aria-label={ariaLabel}
// 						aria-expanded={isOpen}
// 						onClick={onClickToggle}
//       		>
//         		<IconMoreHorizontal16 />
//       		</button>
// 				</MenuPrimitive.Toggle>
//     		<MenuPrimitive.Content>
//       		<div className="hds-breadcrumb__truncation-content">
//         		<ol className="hds-breadcrumb__sublist">
// 							{sublist items}
//         		</ol>
//       		</div>
//     		</MenuPrimitive.Content>
//   		</MenuPrimitive>
// 		</li>
// 	)
// }