import { jsx as _jsx } from "react/jsx-runtime";
import { ellipsis } from 'polished';
import styled, { css } from 'styled-components';
import { spacing } from '../../spacing';
import { fontSize } from '../../style/theme';
import { Icon } from '../icon/Icon.component';
const BreadcrumbContainer = styled.ol `
  display: flex;
  list-style-type: none;
  padding-left: 0;
  margin: 0;
  overflow-y: auto;
`;
const BreadcrumbItem = styled.li `
  box-sizing: border-box;
  height: 100%;
  font-size: ${fontSize.larger};
  ${ellipsis('250px')}
  min-width: 3rem;

  ${(props) => {
    const { textPrimary, selectedActive, textLink } = props.theme;
    if (props.active) {
        return css `
        * {
          text-decoration: none;
          color: ${textPrimary};
        }
        color: ${textPrimary};
      `;
    }
    return css `
      * {
        text-decoration: none;
        color: ${textLink};
      }
      color: ${textLink};
      border-bottom: 2px solid transparent;
      &:hover {
        * {
          color: ${selectedActive};
        }
        color: ${selectedActive};
        border-bottom: 2px solid ${selectedActive};
      }
    `;
}}
`;
const BreadcrumbSeparator = styled.li `
  ${(props) => css `
    color: ${props.theme.textPrimary};
    padding: ${spacing.r4} ${spacing.r8};
    display: flex;
    align-items: center;
    font-size: ${fontSize.small};
  `}
`;
const withBreadcrumbSeparator = (lastIndex) => (acc, item, index) => {
    const notLast = index < lastIndex;
    return notLast
        ? [
            ...acc,
            item,
            _jsx(BreadcrumbSeparator, { className: "sc-breadcrumb_separator", children: _jsx(Icon, { name: "Chevron-right" }) }, `sc-breadcrumb_separator_${index}`),
        ]
        : [...acc, item];
};
const Breadcrumb = ({ paths = [], ...rest }) => {
    const lastIndex = paths.length - 1;
    const breadcrumbItems = paths
        .map((item, index) => {
        return (_jsx(BreadcrumbItem, { className: "sc-breadcrumb_item", active: index === lastIndex, children: item }, `sc-breadcrumb_item_${index}`));
    })
        .reduce(withBreadcrumbSeparator(lastIndex), []);
    return (_jsx(BreadcrumbContainer, { className: "sc-breadcrumb", ...rest, children: breadcrumbItems }));
};
export { Breadcrumb };
