import React from 'react'
import PropTypes from 'prop-types'
import {
  Link,
  Typography,
  applyTextStyles,
  clickProps,
  selectSystemProps,
  useThemeTokens
} from '@telus-uds/components-base'
import styled from 'styled-components'
import { htmlAttrs } from '../../utils'

const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])

const StyledItemContainer = styled.li({
  display: 'inline-block',
  paddingLeft: ({ listItemPadding }) => `${listItemPadding}px`,
  lineHeight: ({ lineHeight, fontSize }) => `${Math.ceil(lineHeight * fontSize)}px`,
  marginBottom: '8px'
})

const IconContainer = styled.span({
  display: 'inline-block',
  paddingLeft: ({ iconPadding }) => `${iconPadding}px`,
  paddingRight: ({ iconPadding }) => `${iconPadding}px`,
  fontFamily: ({ fontName, fontWeight }) => applyTextStyles({ fontName, fontWeight }).fontFamily,
  height: ({ iconContainerSize }) => `${iconContainerSize}px`,
  width: ({ iconContainerSize, iconPadding }) => `${iconContainerSize + iconPadding * 2}px`,
  verticalAlign: 'bottom'
})

const Item = React.forwardRef(
  (
    {
      href,
      children,
      current = false,
      tokens,
      variant = { light: true }, // `light` variant (shared with the `Link` component) is default by design
      LinkRouter,
      linkRouterProps,
      onPress,
      ...rest
    },
    ref
  ) => {
    const {
      iconColor,
      icon: ChevronRightIcon,
      currentColor,
      color,
      iconSize,
      fontSize,
      fontWeight,
      fontName,
      lineHeight,
      listItemPadding,
      iconContainerSize,
      iconPadding
    } = useThemeTokens('Breadcrumbs', tokens, variant)

    const linkOptions = { ...clickProps.toPressProps(selectProps(rest)), href }

    return (
      <StyledItemContainer
        listItemPadding={listItemPadding}
        lineHeight={lineHeight}
        fontSize={fontSize}
        iconContainerSize={iconContainerSize}
      >
        {current ? (
          <Typography
            tokens={{
              color: currentColor,
              fontSize,
              fontWeight,
              lineHeight
            }}
            variant={variant}
          >
            {children}
          </Typography>
        ) : (
          <>
            <Link
              {...linkOptions}
              ref={ref}
              tokens={{ color, blockFontSize: fontSize, blockLineHeight: lineHeight }}
              LinkRouter={LinkRouter}
              linkRouterProps={linkRouterProps}
              variant={variant}
              onPress={onPress}
            >
              {children}
            </Link>
            <IconContainer
              iconPadding={iconPadding}
              fontName={fontName}
              fontWeight={fontWeight}
              iconContainerSize={iconContainerSize}
            >
              <ChevronRightIcon size={iconSize} color={iconColor} />
            </IconContainer>
          </>
        )}
      </StyledItemContainer>
    )
  }
)

Item.displayName = 'Item'

Item.propTypes = {
  ...selectedSystemPropTypes,
  /**
   * Breadcrumb text
   */
  children: PropTypes.node.isRequired,
  /**
   * @ignore
   *
   * Indicates whether or not the Item should be as current/active
   */
  current: PropTypes.bool,
  /**
   * Target URL. This will be converted to `to` if the `LinkRouter`
   * prop is provided to the `Item` or parent `Breadcrumbs` element.
   */
  href: PropTypes.string.isRequired,
  /**
   * Variant to render.
   */
  variant: PropTypes.shape({ inverse: PropTypes.bool }),
  /**
   * Function to be called when the Item is clicked.
   */
  onPress: PropTypes.func
}

export default Item