import React, { FC, useContext } from 'react';
import { View } from 'react-native';
import { ChildPaginationProps } from './types';
import styles from './styles';
import Dot from './Dot';
import { Colors, Spacing } from '../Consts';
import { MiniAppContext } from '../Context';

const PaginationWhiteDot: FC<ChildPaginationProps> = ({
  dataLength = 2,
  activeIndex = 0,
  style,
}) => {
  const context = useContext<any>(MiniAppContext);

  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;

  const renderDots = () => {
    const dots: React.ReactElement[] = [];
    for (let i = 0; i < dataLength; i++) {
      dots.push(
        <Dot
          key={`Dot${i}`}
          style={[
            i !== dataLength - 1 ? { marginRight: Spacing.XS } : {},
            { backgroundColor: Colors.black_01 },
          ]}
          active={activeIndex === i}
        />,
      );
    }
    return dots;
  };
  return (
    <View
      style={[style, styles.row, showBaseLineDebug && styles.debugBaseLine]}
    >
      <View style={styles.paginationWhiteContainer}>{renderDots()}</View>
    </View>
  );
};

export default PaginationWhiteDot;