import React from 'react'
import PropTypes from 'prop-types'

import { Image, Platform, Text, View } from 'react-native'
import { getTokensPropType } from '../utils/props/tokens'
import { variantProp } from '../utils/props/variantProp'
import { withLinkRouter } from '../utils/withLinkRouter'
import { a11yProps } from '../utils/props/a11yProps'
import { linkProps } from '../utils/props/linkProps'
import { selectSystemProps } from '../utils/props/selectSystemProps'
import { useViewport } from '../ViewportProvider/useViewport'
import { applyTextStyles } from '../ThemeProvider/utils/styles'
import { useThemeTokensCallback } from '../ThemeProvider/useThemeTokens'
import { Link } from '../Link/Link'
import { StackWrap } from '../StackView/StackWrap'

// pass through and type relevant system props - add more sets for interactive components
const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, linkProps])

const selectImageStyle = (imageDimension) => ({
  width: imageDimension,
  height: imageDimension,
  ...Platform.select({
    // TODO: https://github.com/telus/universal-design-system/issues/487
    web: { transition: 'width 200ms, height 200ms' }
  })
})

const selectContainerStyle = ({ contentMaxDimension, textAlign }) => ({
  textAlign,
  outline: 'red',
  width: contentMaxDimension,
  overflow: 'hidden'
})

const selectImageContainerStyle = (contentMaxDimension) => ({
  width: contentMaxDimension,
  height: contentMaxDimension,
  justifyContent: 'center',
  alignItems: 'center'
})

const selectLinkToken = ({ outerBorderColor }) => ({ outerBorderColor })

/**
 * Component export along with QuickLinksFeature to be used as children
 *
 * It will receive a image source and a accessibility label and will render a link accordingly with the theme tokens
 */
const QuickLinksFeatureItemBase = React.forwardRef(
  ({ tokens, variant, children, imageAccessibilityLabel, imageSource, ...rest }, ref) => {
    const viewport = useViewport()
    const getTokens = useThemeTokensCallback('QuickLinksFeatureItem', tokens, variant)

    return (
      <Link ref={ref} {...selectProps(rest)} tokens={(state) => selectLinkToken(getTokens(state))}>
        {({ hovered: hover, pressed, focused: focus }) => {
          const {
            contentDirection,
            contentSpace,
            contentAlignItems,
            contentMaxDimension,
            imageDimension,
            textLine,
            gap,
            ...themeTokens
          } = getTokens({ viewport, hover, pressed, focus })

          const textStyle = {
            ...applyTextStyles(themeTokens),
            textDecorationLine: textLine
          }
          return (
            <View style={selectContainerStyle({ ...themeTokens, contentMaxDimension })}>
              <StackWrap
                direction={contentDirection}
                space={contentSpace}
                gap={gap}
                tokens={{ alignItems: contentAlignItems }}
              >
                <View style={selectImageContainerStyle(contentMaxDimension)}>
                  <Image
                    accessibilityIgnoresInvertColors
                    imageAccessibilityLabel={imageAccessibilityLabel}
                    source={imageSource}
                    style={selectImageStyle(imageDimension)}
                  />
                  <Text style={textStyle}>{children}</Text>
                </View>
              </StackWrap>
            </View>
          )
        }}
      </Link>
    )
  }
)

QuickLinksFeatureItemBase.displayName = 'QuickLinksFeatureItem'

QuickLinksFeatureItemBase.propTypes = {
  ...withLinkRouter.propTypes,
  ...selectedSystemPropTypes,
  tokens: getTokensPropType('QuickLinksFeatureItem'),
  variant: variantProp.propType,
  /**
   * Text which will be rendered within the Link
   */
  children: PropTypes.node.isRequired,
  /**
   * Image accessibility label
   */
  imageAccessibilityLabel: PropTypes.string.isRequired,
  /**
   * Image node or Image url
   */
  imageSource: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired
}

// Export unwrapped component for react-docgen to extract info for docsite
export { QuickLinksFeatureItemBase }

export const QuickLinksFeatureItem = withLinkRouter(QuickLinksFeatureItemBase)