import React, {memo} from 'react';
import AnimatedDotsCarousel, {
  ScrollableDotConfig,
} from 'react-native-animated-dots-carousel';
import Animated, {SharedValue, useAnimatedStyle} from 'react-native-reanimated';
import {
  CIRCLE_DIMENSIONS,
  styles,
} from '@components/MultimediaContainer/styles';
import {
  FIRST_DECREASED_DOT_FACTOR,
  MAX_INDICATORS,
  SECOND_DECREASED_DOT_FACTOR,
} from '@components/MultimediaContainer/constants';
import Text from '@components/Text';
import {SetState} from '@interfaces/generic';
import {COLORS} from '@shared/colors';
import {SPACING, useTheme} from '@shared/theme';
import {Opacity} from '@shared/constants';

interface Props {
  showingDeleteButton: boolean;
  attachmentsLength: number;
  index: number;
  showingBottomCircles: boolean;
  fadeAnimation: SharedValue<number>;
  onChangeIndex: SetState<number>;
  onNewIndex: (index: number) => void;
}

function Footer({
  showingDeleteButton,
  attachmentsLength,
  index,
  showingBottomCircles,
  fadeAnimation,
  onChangeIndex,
  onNewIndex,
}: Props) {
  const {theme} = useTheme();
  const opacityStyle = useAnimatedStyle(() => ({opacity: fadeAnimation.value}));
  const scrollableDotsConfig: ScrollableDotConfig = {
    setIndex: onChangeIndex,
    onNewIndex: onNewIndex,
    containerBackgroundColor: COLORS.TRANSPARENT_GRAY_TWO,
  };
  const DotsCarouselBaseConfig = {
    color: theme.primaryBgLighter,
    margin: SPACING['x0.25'],
    opacity: Opacity.FULL,
    size: CIRCLE_DIMENSIONS,
  };

  return showingBottomCircles ? (
    <>
      <AnimatedDotsCarousel
        length={attachmentsLength}
        scrollableDotsConfig={scrollableDotsConfig}
        currentIndex={index}
        maxIndicators={MAX_INDICATORS}
        interpolateOpacityAndColor={false}
        activeIndicatorConfig={{
          ...DotsCarouselBaseConfig,
          color: theme.primary,
        }}
        inactiveIndicatorConfig={DotsCarouselBaseConfig}
        decreasingDots={[
          {
            config: {
              ...DotsCarouselBaseConfig,
              size: CIRCLE_DIMENSIONS * FIRST_DECREASED_DOT_FACTOR,
            },
            quantity: 1,
          },
          {
            config: {
              ...DotsCarouselBaseConfig,
              size: CIRCLE_DIMENSIONS * SECOND_DECREASED_DOT_FACTOR,
            },
            quantity: 1,
          },
        ]}
      />
      {!showingDeleteButton && (
        <Animated.View style={[styles.imageCounter, opacityStyle]}>
          <Text style={styles.imageCounterText}>
            {`${index + 1}/${attachmentsLength}`}
          </Text>
        </Animated.View>
      )}
    </>
  ) : null;
}

export default memo(Footer);
