import React, { memo } from 'react';
import { Animated } from 'react-native';
import { SBox } from '../../common/s-components/layout/s-box';
import { SText } from '../../common/s-components/typography/s-text';
import { theme } from '../../app/theme';
import { SBoxAnimated } from '../../common/s-components/layout/s-box-animated';

type TProps = {
  position: Animated.AnimatedDivision<any>;
  slidesNumber: number;
};

export const DotGroup: React.FC<TProps> = memo(props => {
  const { position, slidesNumber } = props;
  return (
    <SBox flexDirection="row">
      {[...Array(slidesNumber).keys()].map(item => {
        let backgroundColor = position.interpolate({
          inputRange: [item - 1, item, item + 1],
          outputRange: [
            theme.colors.eastBay,
            theme.colors.wildStrawberry,
            theme.colors.eastBay,
          ],
          extrapolate: 'clamp',
        });
        const marginLeft = item === 0 ? 0 : 8;
        return (
          <SBoxAnimated
            key={item}
            width={8}
            height={8}
            borderRadius={4}
            ml={marginLeft}
            backgroundColor={backgroundColor}
          >
            <SText />
          </SBoxAnimated>
        );
      })}
    </SBox>
  );
});