import styled, { css } from 'styled-components';
import { Link } from 'react-router-dom';

const SingleBreadcrumbContainer = styled.div`
  display: flex;
  font-size: ${({ theme }) => theme.fontSizes.breadcrumb.item};
  font-weight: ${({ theme }) => theme.fontWeights.breadcrumb.item};
  line-height: ${({ theme }) => theme.lineHeights.breadcrumb.item};
  color: ${({ theme }) => theme.colors.breadcrumb.item};
  margin: 0;
  padding: 0;

  > i {
    line-height: ${({ theme }) => theme.lineHeights.breadcrumb.item};
    margin-right: ${({ theme }) => theme.space.breadcrumb.backIconMarginRight};
  }
`;

const BreadcrumbContainer = styled.ul`
  padding: 0;
  margin: 0;
  font-size: ${({ theme }) => theme.fontSizes.breadcrumb.item};
  font-weight: ${({ theme }) => theme.fontWeights.breadcrumb.item};
  line-height: ${({ theme }) => theme.lineHeights.breadcrumb.item};
  list-style: none;
`;

const ABreadcrumbItem = styled.a``;

const LinkBreadcrumbItem = styled(Link)``;

const getItemStyle = (active: boolean) => {
  const key = active === true ? 'itemActive' : 'item';
  return css`
    text-decoration: none;
    margin: 0;
    padding: 0;
    color: ${({ theme }) => theme.colors.breadcrumb[key]};
    font-size: ${({ theme }) => theme.fontSizes.breadcrumb[key]};
    font-weight: ${({ theme }) => theme.fontWeights.breadcrumb[key]};
    line-height: ${({ theme }) => theme.lineHeights.breadcrumb[key]};
  `;
};

const TextBreadcrumbWrapper = styled.li`
  display: inline;
  margin: 0;
  padding: 0;

  ${getItemStyle(true)};
`;

const LinkBreadcrumbWrapper = styled(TextBreadcrumbWrapper)`
  ${ABreadcrumbItem}, ${LinkBreadcrumbItem} {
    ${getItemStyle(false)};
  }
`;

const BreadcrumbItemSeparator = styled.span`
  margin: ${({ theme }) => theme.space.breadcrumb.separatorMargin};
  padding: 0;
  color: ${({ theme }) => theme.colors.breadcrumb.item};
`;

export {
  SingleBreadcrumbContainer,
  BreadcrumbContainer,
  TextBreadcrumbWrapper,
  LinkBreadcrumbWrapper,
  BreadcrumbItemSeparator,
  ABreadcrumbItem,
  LinkBreadcrumbItem,
};