import React from 'react'
import { styled } from 'styleh-components'
import { Separator as BaseSeparator, SeparatorProps } from 'atoms/Separator'
import { Link, LinkProps } from 'atoms/Link'
import { media } from '@skava/styleh-toolset'

const flexItemStyles = styled.css`
  display: inline-flex;
`

const flexList = styled.css`
  @container();
  display: flex;
  align-items: center;
`

const breadCrumbItemStyles = styled.css`
  ${flexItemStyles};
  color: var(--color-light-grey);

  &:last-child {
    color: var(--color-dark-grey);
  }
`

export const BreadCrumbWrapper = styled.div`
  display: flex;
  align-items: center;
  background: var(--color-blue);
  @font (13,semi);
  ${flexList};
  height: rem(40);
  max-width: $spacing-max-width;
  overflow: auto;

  ${media.desktopOrLarger`
    padding: 0 $spacing;
  `} ${media.tabletOrSmaller`
    padding-left: rem(8);
  `};
`

const itemStyles = styled.css`
  padding-right: rem(16);
  @font (14,regular);
  color: var(--color-pure-white);
  white-space: nowrap;
  &:hover,
  &:last-child {
    color: var(--color-pure-white);
  }

  ${media.phoneOrSmaller`
    padding-right: rem(8);
  `};
`

export const StyledBreadCrumbItem = styled.span`
  ${breadCrumbItemStyles};
  ${itemStyles};
`

const LinkAdapter = (props: LinkProps) => (
  <Link data-qa={'qa-breadcrumb'} {...props} />
)

export const BreadCrumbItemLink = styled(LinkAdapter)`
  ${breadCrumbItemStyles};
  ${itemStyles};
  text-decoration: none;
`

const SeparatorWithArrow = (props: SeparatorProps) => (
  <BaseSeparator {...props} pipe={false} arrow={true} />
)

/**
 * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_SEPARATOR
 */
export const Separator = styled(SeparatorWithArrow)`
  ${flexItemStyles};
  padding: 0 rem(16) 0 0;

  color: var(--color-pure-white);

  /** @todo this is really bad, because of the icon */
  g > path {
    fill: var(--color-pure-white);
  }

  ${media.phoneOrSmaller`
    padding: 0 rem(8) 0 0;
  `};
`