import { Breadcrumb } from 'antd';
import React, { useMemo } from 'react'
import { Link } from 'react-router-dom';
import { MenuItem } from '../../models/_/defs';

const AppBreadcrumb: React.FC<{
  menu: MenuItem[];
  menuIndexes: string[];
}> = ({ menu, menuIndexes }) => {

  const menulist = useMemo(() => {
    const ret: MenuItem[] = [];
    let o: MenuItem[] = menu;
    for (const id of menuIndexes) {
      const hit = o.find((m: any) => m.id === id);
      if (hit) {
        ret.push(hit);
        o = hit.children || [];
      }
    }
    return ret;
  }, [menu, menuIndexes])

  return (
    <div className="app-breadcrumb">
      <Breadcrumb >
        {
          menulist.map((m: any) => (
            <Breadcrumb.Item key={m.id}>
              {
                m.path ? <Link to={m.path}>{m.title}</Link> : m.title
              }
            </Breadcrumb.Item>
          ))
        }
      </Breadcrumb>
    </div>

  )
}

export default AppBreadcrumb