import { Link, useLocation } from 'react-router'
import { twMerge } from 'tailwind-merge'

import { MENU } from './menu'

export const Sidebar = () => {
  const { pathname } = useLocation()
  const path = () => {
    // Extract the first three segments for deep paths, otherwise use the full pathname
    const segments = pathname.split('/')
    return segments.length > 3 ? segments.slice(0, 3).join('/') : pathname
  }

  return (
    <div className="flex min-h-[calc(100dvh-80px)] flex-col gap-y-10 overflow-y-auto bg-white p-5">
      {MENU.map(({ group, items }) => (
        <div
          className="flex flex-col"
          key={group}
        >
          <div className="px-5 pb-4 text-[#4C5CA0]/50 uppercase">{group}</div>
          {items.map(({ title, url, icon: Icon }) => (
            <Link
              to={url}
              key={`${group}-${title}`}
              className={twMerge(
                path() === url ? 'bg-[#707FDD]/10 font-bold' : '',
                'group/menu flex h-[42px] w-[200px] items-center gap-x-3 rounded-md px-5 transition-all hover:bg-[#707FDD]/10',
              )}
            >
              <Icon
                className={twMerge(
                  path() === url ? 'text-[#5363AB]' : 'text-[#A6ABC8]',
                  'h-[18px] w-[18px] transition-all group-hover/menu:text-[#5363AB]',
                )}
              />
              <span
                className={twMerge(
                  path() === url ? 'text-[#5363AB]' : 'text-[#273240]',
                  'text-base transition-all group-hover/menu:text-[#5363AB]',
                )}
              >
                {title}
              </span>
            </Link>
          ))}
        </div>
      ))}
    </div>
  )
}