import React from 'react';
import {View} from 'react-native';
import AnimatedDotsCarousel, {
  DecreasingDot,
  DotConfig,
} from 'react-native-animated-dots-carousel';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

const CIRCLE_DIMENSIONS = 8;
const FIRST_DECREASED_DOT_FACTOR = 0.8;
const SECOND_DECREASED_DOT_FACTOR = 0.5;
const MAX_INDICATORS = 3;

interface Props {
  activeIndex: number;
  attachmentsLength: number;
}

export function Footer({activeIndex, attachmentsLength}: Props) {
  const {theme} = useTheme();

  const dotsBaseConfig: DotConfig = {
    color: theme.action.background.brand.hover,
    margin: 4,
    opacity: 1,
    size: CIRCLE_DIMENSIONS,
  };

  const activeDotsConfig: DotConfig = {
    ...dotsBaseConfig,
    color: theme.brand[500],
  };

  const decreasingDotsConfig: DecreasingDot[] = [
    {
      config: {
        ...dotsBaseConfig,
        size: CIRCLE_DIMENSIONS * FIRST_DECREASED_DOT_FACTOR,
      },
      quantity: 1,
    },
    {
      config: {
        ...dotsBaseConfig,
        size: CIRCLE_DIMENSIONS * SECOND_DECREASED_DOT_FACTOR,
      },
      quantity: 1,
    },
  ];

  return (
    <View style={styles.container}>
      <AnimatedDotsCarousel
        length={attachmentsLength}
        currentIndex={activeIndex}
        maxIndicators={MAX_INDICATORS}
        interpolateOpacityAndColor={false}
        activeIndicatorConfig={activeDotsConfig}
        inactiveIndicatorConfig={dotsBaseConfig}
        decreasingDots={decreasingDotsConfig}
      />
    </View>
  );
}
