import React, { FC, memo } from 'react';
import { View, useWindowDimensions } from 'react-native';
import { StoryProgressProps } from '../../core/dto/componentsDTO';
import ProgressStyles from './Progress.styles';
import ProgressItem from './item';

const Progress: FC<StoryProgressProps> = ( {
  progress, active, activeStory, length,
  progressActiveColor, progressColor,
} ) => {

  const { width: WIDTH } = useWindowDimensions()

  const width = ( (
    WIDTH - ProgressStyles.container.left * 2 ) - ( length - 1 )
    * ProgressStyles.container.gap ) / length;

  return (
    <View style={[ ProgressStyles.container, { width: WIDTH } ]}>
      {[ ...Array( length ).keys() ].map( ( val ) => (
        <ProgressItem
          active={active}
          activeStory={activeStory}
          progress={progress}
          index={val}
          width={width}
          key={val}
          progressActiveColor={progressActiveColor}
          progressColor={progressColor}
        />
      ) )}
    </View>
  );

};

export default memo( Progress );