import { useContext } from 'react'
import { SubMenuContext } from '@/contexts/contexts'
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/shadcn/ui/breadcrumb"
import { Link, useLocation } from 'react-router-dom'

const SegmentLink = () => {
  const location = useLocation()
  const { pathname } = location
  const segments = pathname.split('/')
  let url = '';

  const breadcrumbLinks = segments.map((segment, i) => {
    const formattedSegment = segment.replace(/-/g, ' ');
    const capitalizedSegment = formattedSegment.charAt(0).toUpperCase() + formattedSegment.slice(1);

    url += `${capitalizedSegment}`;

    return (
      <Link key={i} to={url} className='dark:text-white'>
        {capitalizedSegment === '' ? '' : capitalizedSegment}
      </Link>
    )
  })

  return breadcrumbLinks;
}

const HeaderMenuBreadCrumb = () => {
  const { menuItems, activeLink } = useContext(SubMenuContext)
  const location = useLocation()

  return (
    <div className="lg:my-2 mt-8 mb-3 flex flex-row justify-between">
      {menuItems.map((item, index) => {
        const isActive = activeLink === item.to || (item.subMenus && item.subMenus.some(subItem => subItem.to === activeLink))

        return (
          isActive ? <h1 key={index} className='flex flex-nowrap justify-center items-center ml-5 text-[16px] text-white'> <item.Icon id="title-icon" className='text-[13px]' /> <span className='ml-[10px]'> {item.title} </span></h1>
                   : '' 
        )
      })}
      <div className='!text-white dark:text-white text-sm mr-6 self-end'> 
        <Breadcrumb>
          <BreadcrumbList>
            <BreadcrumbItem>
              <BreadcrumbLink>
                <Link to="/"><i className='fa fa-home'/> Home</Link>
              </BreadcrumbLink>
            </BreadcrumbItem>
            { location.pathname === '/' ? '' : <BreadcrumbSeparator />}
            <BreadcrumbItem>
              <BreadcrumbPage>
                { <SegmentLink />}
              </BreadcrumbPage>
            </BreadcrumbItem>
          </BreadcrumbList>
        </Breadcrumb>
      </div>
    </div>
  )
}

export default HeaderMenuBreadCrumb;