import { observer } from 'mobx-react';
import { useApphouse } from '../context/useApphouse';
import { View } from './View';
import { ApphouseComponent } from './component.interfaces';
import { BreadcrumbsStyles, Breadcrumbs } from './Breadcrumbs';

export interface ICrumb {
  id: string;
  title: string;
  onClick: () => void;
}

/**
 * A minimalistic breadcrumbs component that can be used to
 * display a trail of links
 */
export const AutoCrumbs = observer(
  (props: ApphouseComponent<BreadcrumbsStyles>) => {
    const { app } = useApphouse();
    const { view } = app;
    const { crumbs, params, path } = view;
    return (
      <View>
        {params && (
          <Breadcrumbs
            current={path}
            crumbs={crumbs.map((s, i) => {
              const title = params ? params[s.replace(':', '')] ?? s : s;
              return {
                id: s,
                title,
                onClick: () => {
                  view.setParams(params);
                  let link = params.path;
                  if (i === 0) {
                    view.open(link, link.split('/').join(' '));
                    return;
                  }
                  for (let j = 0; j < i; j++) {
                    const key = crumbs[j + 1];
                    link = link + '/' + key;
                  }
                  view.open(link, link.split('/').join(' '));
                }
              };
            })}
            styleOverwrites={props.styleOverwrites}
          />
        )}
      </View>
    );
  }
);