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 { BACKDROP_Z_INDEX, SPACE_WITH_LABEL, SPACE_WITHOUT_LABEL } from './shared'
import { activityIndicatorCommonProps } from './sharedProptypes'

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

FullScreenIndicator.displayName = 'FullScreenIndicator'

const staticStyles = StyleSheet.create({
  fullScreenOverlay: {
    ...Platform.select({
      web: {
        position: 'fixed',
        top: 0,
        left: 0,
        width: '100vw',
        height: '100vh',
        zIndex: BACKDROP_Z_INDEX,
        justifyContent: 'center',
        alignItems: 'center'
      },
      default: {
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        justifyContent: 'center',
        alignItems: 'center',
        ...(Platform.OS === 'android' ? { elevation: 5 } : { zIndex: BACKDROP_Z_INDEX })
      }
    })
  }
})

FullScreenIndicator.propTypes = {
  /**
   * Shared props
   * */
  ...activityIndicatorCommonProps,
  /**
   * Background color for overlay
   * */
  backgroundColor: PropTypes.string.isRequired
}