import React from 'react'
import { StyleSheet, View } from 'react-native'
import PropTypes from 'prop-types'
import { useCarousel } from '../CarouselContext'
import { StepTracker } from '../../StepTracker/StepTracker'
import { StackView } from '../../StackView/StackView'
import { Spacer } from '../../Spacer/Spacer'
import { Progress } from '../../Progress/Progress'
import { ProgressBar } from '../../Progress/ProgressBar'
import { variantProp } from '../../utils/props/variantProp'

/**
 * Renders the Carousel's panel navigation as a StepTracker (the dot indicators).
 *
 * The dots opt into the `floating` StepTracker appearance by default, which brands implement to
 * style the carousel indicators (koodo: an animated pill active dot with outlined inactive circles).
 * Themes that don't implement `floating` ignore it, so other brands are unaffected. A consumer's
 * `stepTrackerVariant` is spread last so it can still override or compose with this default.
 *
 * Each dot is navigable: pressing one calls the carousel's `goTo` to jump straight to that slide.
 */
export const CarouselStepTracker = React.forwardRef(
  ({ stepTrackerVariant, progressBarVariant, enableDisplayMultipleItemsPerSlide }, ref) => {
    const {
      activeIndex,
      totalItems,
      getCopyWithPlaceholders,
      goTo,
      themeTokens: { stepTrackerCurrentBackgroundColor, ...themeTokens }
    } = useCarousel()
    const stackViewTokens = {
      justifyContent: 'center'
    }

    const stepTrackerTokens = {
      showStepLabel: false,
      showStepTrackerLabel: themeTokens.showStepTrackerLabel,
      // TODO: StepTracker 'isComplete'/'isCurrent' is incorrect, see line StepTracker/Step.jsx line 63, refactor incorrect values and remove this
      knobCompletedBackgroundColor: stepTrackerCurrentBackgroundColor ?? 'none',
      connectorCompletedColor: 'none',
      connectorColor: 'none',
      containerPaddingTop: themeTokens.spaceBetweenSlideAndPanelNavigation
    }

    const steps = Array.from(Array(totalItems)).map((_, index) => String(index))

    const showProgressBar =
      enableDisplayMultipleItemsPerSlide && progressBarVariant?.style !== 'dots'

    if (showProgressBar) {
      if (totalItems === 1) {
        return null
      }
      return (
        <>
          <Spacer space={4} />
          <StackView direction="row" tokens={stackViewTokens} ref={ref}>
            <View style={staticStyles.progress}>
              <Progress>
                <ProgressBar
                  offset={{
                    items: totalItems,
                    current: activeIndex + 1
                  }}
                  variant={progressBarVariant}
                  accessibilityLabel={getCopyWithPlaceholders('stepTrackerLabel')}
                />
              </Progress>
            </View>
          </StackView>
        </>
      )
    }
    if (enableDisplayMultipleItemsPerSlide && totalItems === 1) {
      return null
    }
    return (
      <StackView direction="row" tokens={stackViewTokens} ref={ref}>
        <StepTracker
          current={activeIndex}
          steps={steps}
          copy={{
            stepLabel: getCopyWithPlaceholders('stepLabel'),
            stepTrackerLabel: enableDisplayMultipleItemsPerSlide
              ? ''
              : getCopyWithPlaceholders('stepTrackerLabel')
          }}
          tokens={stepTrackerTokens}
          variant={{ floating: true, ...stepTrackerVariant }}
          onStepPress={goTo}
          getStepPressLabel={(index) =>
            getCopyWithPlaceholders('stepButtonLabel').replace('%{targetStep}', index + 1)
          }
        />
      </StackView>
    )
  }
)

CarouselStepTracker.displayName = 'CarouselStepTracker'

CarouselStepTracker.propTypes = {
  stepTrackerVariant: variantProp.propType,
  progressBarVariant: variantProp.propType,
  enableDisplayMultipleItemsPerSlide: PropTypes.bool
}

const staticStyles = StyleSheet.create({
  progress: {
    width: 288
  }
})