import React from 'react'
import { Pressable, Platform, StyleSheet } from 'react-native'
import { PropTypes } from 'prop-types'

import { useCarousel } from '../CarouselContext'

/**
 * Focus target so that when a new slide is shown, the user can tab into
 * its content using the keyboard.
 *
 * @TODO rework this after integrating with SkipLink when available.
 */
export const CarouselFirstFocus = React.forwardRef(({ title }, ref) => {
  const { getCopyWithPlaceholders } = useCarousel()

  // TODO: integrate skip link description if behaving as skip link.
  // Consider moving this content to aria-live area while only the skip link is focused.
  const accessibilityLabel = `${title}, ${getCopyWithPlaceholders('stepTrackerLabel')}`

  const accessibilityRole = Platform.select({
    web: 'link', // The focused item will ultimately be a skip link.
    default: 'button' // 'link' role usually denotes opening browser on Native.
  })

  return (
    <Pressable
      // TODO: integrate skip link functionality, jump focus to after Carousel
      onPress={undefined}
      ref={ref}
      accessibilityLabel={accessibilityLabel}
      accessibilityRole={accessibilityRole}
      style={StyleSheet.absoluteFill}
      focusable
    />
  )
})

CarouselFirstFocus.displayName = 'CarouselFirstFocus'
CarouselFirstFocus.propTypes = {
  /**
   * Simple description of this carousel for screenreaders, to be read before
   * "{itemLabel} {index} of {count}.
   *
   * For example, "Summer offers" in "Summer offers, offer 1 of 3"
   */
  title: PropTypes.string
}