import { css, CSSProperties } from 'glamor';
import { observer } from 'mobx-react';
import { BsChevronRight } from 'react-icons/bs';
import { useApphouse } from '../context/useApphouse';
import { setAlpha } from '../utils/color/setAlpha';
import { mergeStyles } from '../styles/mergeStyles';
import { ApphouseComponent } from './component.interfaces';

export interface BreadcrumbsStyles {
  container?: CSSProperties;
  crumb?: CSSProperties;
  link?: CSSProperties;
  chevron?: CSSProperties;
}

/**
 * Interface for one breadcrumb item
 */
export interface ICrumb {
  id: string;
  title: string;
  onClick: () => void;
}

export interface BreadcrumbsProps extends ApphouseComponent<BreadcrumbsStyles> {
  /**
   * The crumbs to display
   */
  crumbs: ICrumb[];
  /**
   * Must be one of the crumb ids
   */
  current: string;
}

/**
 * A minimalistic breadcrumbs component that can be used to
 * display a trail of links
 */
export const Breadcrumbs = observer((props: BreadcrumbsProps) => {
  const { crumbs, current } = props;
  const { theme } = useApphouse();
  const { styles, colors, tokens } = theme;
  if (!theme) {
    return null;
  }
  const componentStyles: BreadcrumbsStyles = {
    container: {
      display: 'flex',
      alignItems: 'center'
    },
    link: {
      margin: 0,
      padding: 0,
      cursor: 'pointer',
      color: setAlpha(colors.onPrimary, 0.4),
      fontFamily: tokens.fontFamily.default,
      ':hover': {
        color: colors.brand,
        textDecoration: 'underline'
      }
    },
    chevron: {
      color: colors.onPrimary,
      paddingLeft: tokens.spacings.default,
      paddingRight: tokens.spacings.default,
      margin: 0,
      paddingTop: 0,
      paddingBottom: 0,
      height: '14px'
    }
  };
  const localStyles = mergeStyles(
    componentStyles,
    props?.styleOverwrites || {}
  );
  return (
    <div {...css(localStyles.container)} data-style="container">
      {crumbs.map((crumb, i) => {
        const isCurrent = current === crumb.id;
        const isNotLast = i < crumbs.length - 1;
        return (
          <div
            role="presentation"
            key={crumb.id}
            {...css(styles.layout?.horizontal, localStyles.crumb)}
            data-xray="crumb"
            data-style="crumb"
          >
            <a
              tabIndex={0}
              onClick={crumb.onClick}
              {...css(
                localStyles.link,
                isCurrent
                  ? {
                      fontWeight: tokens.fontWeight.bolder,
                      color: setAlpha(colors.onPrimary, 1)
                    }
                  : {}
              )}
              data-style="link"
            >
              {crumb.title}
            </a>
            {isNotLast && (
              <div {...css(localStyles.chevron)}>
                <BsChevronRight />
              </div>
            )}
          </div>
        );
      })}
    </div>
  );
});