import React from "react";
import classNames from "classnames";
import { BoxProps, Box } from "../Box";
import { LinkProps, Link } from "../Link";
import { bemHOF } from "../../utilities/bem";
import { Icon, ICON_TYPE } from "../Icon";
import { Flex } from "../Flex";
import { Text } from "../Text";

const b = bemHOF("TopBar");

export interface BreadcrumbsProps extends BoxProps {
  currentPageTitle: string;
  currentPageSubtitle?: string;
  parentTitle?: string;
  parentLinkTitle?: string;
  parentLinkProps?: LinkProps;
}

export const TopBarBreadcrumbs = (props: BreadcrumbsProps) => {
  const {
    className,
    currentPageTitle,
    currentPageSubtitle,
    parentTitle,
    parentLinkTitle,
    parentLinkProps,
    ...rest
  } = props;
  let parentElement = null;

  if (parentLinkTitle) {
    const propsClasses =
      parentLinkProps !== undefined ? parentLinkProps.className : undefined;

    const linkClasses = classNames(
      b({ e: "bc-parent" }),
      b({ e: "bc-parent", m: "link" }),
      propsClasses,
    );
    parentElement = (
      <Link noStyles {...parentLinkProps} className={linkClasses}>
        <Icon
          icon={ICON_TYPE.LEVEL_UP_ALT}
          flip="horizontal"
          className={b({ e: "bc-parent-link-icon" })}
        />
        {parentLinkTitle}
      </Link>
    );
  }

  if (parentTitle) {
    parentElement = (
      <Box
        className={classNames(
          b({ e: "bc-parent" }),
          b({ e: "bc-parent", m: "title" }),
        )}
      >
        {parentTitle}
      </Box>
    );
  }

  return (
    <Flex className={classNames(b({ e: "bc" }), className)} {...rest}>
      {parentElement}
      <Text as="span" className={b({ e: "bc-page-title" })}>
        {currentPageTitle}
      </Text>
      {currentPageSubtitle && (
        <Text as="span" className={b({ e: "bc-page-subtitle" })}>
          {currentPageSubtitle}
        </Text>
      )}
    </Flex>
  );
};