import React from 'react'
import PropTypes from 'prop-types'
import {
  Button,
  selectSystemProps,
  useResponsiveProp,
  useViewport,
  useThemeTokensCallback,
  getTokensPropType
} from '@telus-uds/components-base'
import styled from 'styled-components'
import { htmlAttrs } from '../utils'

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

const defaultMaxWidth = 192

const ItemContainer = styled.div(({ targetWidth, viewport }) => ({
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'center',
  maxWidth: viewport !== 'xs' ? `${Math.max(defaultMaxWidth, targetWidth ?? 0)}px` : '100%',
  flexGrow: targetWidth ? 1 : 0,
  flexShrink: 1,
  ...(viewport === 'xs' && {
    width: '100%',
    flex: 1
  })
}))

/**
 * NavigationItem within a NavigationBar component.
 *
 * This is rendered automatically by `NavigationBar` and isn't intended be used directly.
 */
const NavigationItem = React.forwardRef(
  (
    {
      accessibilityRole = 'link', // @todo switch to 'button' for dropdowns
      children,
      id,
      onClick: handleClick = () => {},
      selected = false,
      accessibilityState = { current: selected ? 'page' : false },
      href,
      tokens,
      variant = {},
      LinkRouter,
      linkRouterProps,
      ...rest
    },
    ref
  ) => {
    const selectedProps = selectProps(rest)
    const targetWidth = useResponsiveProp({ xs: 288, lg: null })
    const viewport = useViewport()
    const getTokens = useThemeTokensCallback('NavigationBar', tokens, variant)
    const getStateTokens = (state) => {
      if (viewport !== 'xs') {
        return getTokens({ ...state, viewport })
      }

      const { width, ...tokensWithoutWidth } = getTokens({ ...state, viewport })

      return tokensWithoutWidth
    }

    return (
      <ItemContainer targetWidth={targetWidth} viewport={viewport}>
        <Button
          accessibilityRole={accessibilityRole}
          accessibilityState={accessibilityState}
          onPress={handleClick}
          ref={ref}
          tokens={getStateTokens}
          variant={{ selected, ...(viewport === 'xs' && { width: 'full' }) }}
          href={href}
          LinkRouter={LinkRouter}
          linkRouterProps={linkRouterProps}
          {...selectedProps}
        >
          {children}
        </Button>
      </ItemContainer>
    )
  }
)
NavigationItem.displayName = 'NavigationItem'

NavigationItem.propTypes = {
  ...selectedSystemPropTypes,
  tokens: getTokensPropType('NavigationBar'),
  onClick: PropTypes.func,
  selected: PropTypes.bool,
  children: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired
}

export default NavigationItem