'use client'

import { ForwardedRef, forwardRef, type AnchorHTMLAttributes, type ReactNode } from 'react'
import { Link } from 'react-router-dom'

import { PktIcon } from '../icon/Icon'

export interface IBreadcrumbs {
  text: string
  href: string
}

export interface IPktBreadcrumbs extends AnchorHTMLAttributes<HTMLAnchorElement> {
  breadcrumbs: IBreadcrumbs[]
  navigationType?: 'router' | 'anchor'
  renderLink?: (args: {
    href: string
    className: string
    children: ReactNode
    props: AnchorHTMLAttributes<HTMLAnchorElement>
  }) => ReactNode
}

export const PktBreadcrumbs = forwardRef(
  (
    { breadcrumbs, navigationType, renderLink, className, ...props }: IPktBreadcrumbs,
    ref: ForwardedRef<HTMLAnchorElement>,
  ) => {
    const slicedBreadcrumbs = breadcrumbs
    // Define the backLink function
    const backLink = slicedBreadcrumbs[slicedBreadcrumbs.length - 2]

    // Define the classes
    const classes = [className, 'pkt-breadcrumbs'].filter(Boolean).join(' ')

    // Create a default renderLink implementation based on navigationType
    const linkRenderer =
      renderLink ||
      (navigationType === 'router'
        ? ({ href, className, children, props }) => (
            <Link to={href} className={className} {...props}>
              {children}
            </Link>
          )
        : ({ href, className, children, props }) => (
            <a href={href} className={className} {...props}>
              {children}
            </a>
          ))

    // Mobile and desktop have different markup
    return (
      <nav ref={ref} aria-label="brødsmulemeny" className={classes}>
        <ol className="pkt-breadcrumbs__list pkt-breadcrumbs--desktop">
          {slicedBreadcrumbs.map((item, index) => (
            <li key={`breadcrumb-${index}`} className="pkt-breadcrumbs__item">
              {index === slicedBreadcrumbs.length - 1 ? (
                <span className="pkt-breadcrumbs__label" aria-current="true">
                  <span className="pkt-breadcrumbs__text">{item.text}</span>
                </span>
              ) : (
                linkRenderer({
                  href: item.href,
                  className: 'pkt-link pkt-link--icon-right pkt-breadcrumbs__label pkt-breadcrumbs__link',
                  children: (
                    <>
                      <PktIcon className="pkt-icon pkt-breadcrumbs__icon pkt-link__icon" name="chevron-thin-right" />
                      <span className="pkt-breadcrumbs__text">{item.text}</span>
                    </>
                  ),
                  props,
                })
              )}
            </li>
          ))}
        </ol>

        {linkRenderer({
          href: backLink.href,
          className: 'pkt-link pkt-link--icon-left pkt-breadcrumbs--mobile',
          children: (
            <>
              <PktIcon className="pkt-back-link__icon pkt-icon pkt-link__icon" name="chevron-thin-left" />
              <span className="pkt-breadcrumbs__text">{backLink.text}</span>
            </>
          ),
          props,
        })}
      </nav>
    )
  },
)
PktBreadcrumbs.displayName = 'PktBreadcrumbs'