import { Link } from 'react-router-dom'
import { useProgramScope } from '../context/ProgramScopeContext.jsx'
import { initiativeCatalogPath, scopedPath } from '../utils/routes.js'

export function ProgramScopeBar() {
  const {
    initiativeId,
    projectId,
    initiativeTitle,
    projectTitle,
    clearScope,
    setScope,
  } = useProgramScope()

  return (
    <div className="program-scope-bar" aria-label="Programm-Scope">
      <span className="program-scope-bar__label">Scope</span>
      <nav className="program-scope-bar__trail">
        <Link
          to={scopedPath('/cockpit')}
          className={
            'program-scope-bar__crumb' +
            (!initiativeId ? ' program-scope-bar__crumb--active' : '')
          }
          onClick={() => clearScope()}
        >
          Portfolio
        </Link>
        {initiativeId && (
          <>
            <span className="program-scope-bar__sep" aria-hidden="true">
              ›
            </span>
            <Link
              to={scopedPath('/control/status', { initiativeId })}
              className={
                'program-scope-bar__crumb' +
                (!projectId ? ' program-scope-bar__crumb--active' : '')
              }
              onClick={() => setScope({ projectId: '', clearProject: true })}
            >
              {initiativeTitle || 'Vorhaben'}
            </Link>
          </>
        )}
        {projectId && (
          <>
            <span className="program-scope-bar__sep" aria-hidden="true">
              ›
            </span>
            <span className="program-scope-bar__crumb program-scope-bar__crumb--active">
              {projectTitle || 'Projekt'}
            </span>
          </>
        )}
      </nav>
      <Link to={initiativeCatalogPath()} className="program-scope-bar__catalog link-inline">
        Vorhaben-Katalog
      </Link>
    </div>
  )
}