import React from 'react'
import { View, StyleSheet, Platform } from 'react-native'
import PropTypes from 'prop-types'
import { StackView } from '../StackView/StackView'
import { Typography } from '../Typography/Typography'
import { RenderActivityIndicator } from './RenderActivityIndicator'
import { activityIndicatorCommonProps } from './sharedProptypes'
import { SPACE_WITH_LABEL, SPACE_WITHOUT_LABEL } from './shared'

export const InlineIndicator = React.forwardRef(
  ({ variantProps, label, labelPosition, labelMapping, showLabel }, ref) => (
    <View style={staticStyles.container}>
      <StackView
        space={showLabel ? SPACE_WITH_LABEL : SPACE_WITHOUT_LABEL}
        direction={labelMapping[labelPosition]}
        tokens={{ alignItems: 'center' }}
      >
        <RenderActivityIndicator {...variantProps} ref={ref} label={label} />
        {showLabel && <Typography>{label}</Typography>}
      </StackView>
    </View>
  )
)

InlineIndicator.displayName = 'InlineIndicator'

const staticStyles = StyleSheet.create({
  container: {
    flexDirection: 'column',
    alignItems: 'center',
    display: Platform.OS === 'web' ? 'inline-flex' : 'flex',
    alignSelf: 'flex-start'
  }
})

InlineIndicator.propTypes = {
  /**
   * Shared props
   * */
  ...activityIndicatorCommonProps,
  /**
   * Whether the indicator sits inline with text/other elements
   * */
  inline: PropTypes.bool
}