import styled, { css } from 'styled-components';
import 'react';
import ChevronLeft from '../../icons/ChevronLeft.js';
import ChevronRight from '../../icons/ChevronRight.js';
import { getColorAlias, getFontSize, getSpacing } from '../../utils/index.js';

const BreadcrumbItem = styled.button `
  align-items: center;
  background: transparent;
  border: none;
  color: ${getColorAlias('contentDefault')};
  display: flex;
  height: 100%;
  padding: 0;
  ${getFontSize('size16')};
  cursor: ${(props) => (props.onClick || props.href ? 'pointer' : 'default')};
  font-weight: ${(props) => props.theme.font.weightBold};
  text-decoration: ${(props) => (props.href ? 'none' : 'initial')};
`;
const BreadcrumbChevron = styled(ChevronRight) `
  fill: ${getColorAlias('contentDefault')};
  margin: ${getSpacing('s00', 's01')};
  width: 12px;
`;
const BreadcrumbBackChevron = styled(ChevronLeft) `
  fill: ${getColorAlias('contentDefault')};
  margin: ${getSpacing('s00', 's01')};
  width: 14px;
`;
const BreadcrumbCurrentPage = styled.span `
  color: ${getColorAlias('contentDefault')};
  height: 100%;
  ${getFontSize('size16')};
  text-decoration: none;
`;
const BreadcrumbWrapper = styled.nav `
  display: flex;
  cursor: ${(props) => (props.onClick ? 'pointer' : 'default')};
  flex-flow: row nowrap;
  align-items: center;
  width: fit-content;

  ${(props) => {
    switch (props.variant) {
        case 'back':
            return css `
          padding: ${getSpacing('s01', 's03', 's01', 's02')};
        `;
        case 'default':
        default:
            return css `
          padding: ${getSpacing('s01', 's04')};
        `;
    }
}}

  ${(props) => props.scrim &&
    css `
      background: ${getColorAlias('overlay')};
      border-radius: ${(props) => props.theme.radius.roundedD};

      ${BreadcrumbItem}, ${BreadcrumbCurrentPage} {
        color: ${getColorAlias('contentLinkLight')};
      }

      ${BreadcrumbChevron}, ${BreadcrumbBackChevron} {
        fill: ${getColorAlias('contentLight')};
      }
    `}
`;

export { BreadcrumbBackChevron, BreadcrumbChevron, BreadcrumbCurrentPage, BreadcrumbItem, BreadcrumbWrapper };
