//@flow
import React from 'react';
import { StyleSheet } from 'react-native';
import TabBarIndicator from 'react-native-tab-view/src/TabBarIndicator';
import Animated from 'react-native-reanimated';
import LinearGradient from 'react-native-linear-gradient';

const styles = StyleSheet.create({
  indicator: {
    position: 'absolute',
    left: 0,
    bottom: 0,
    right: 0,
    height: 2,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'stretch',
  },
});

export default class TabBarIndicatorLinear extends TabBarIndicator {
  render() : any {
    const {
      width, position, navigationState, style,
    } = this.props;
    const { routes } = navigationState;

    const translateX = this.getTranslateX(position, routes, width);
    return (
      <Animated.View
        style={[
          styles.indicator,
          { width: `${100 / routes.length}%` },
          // If layout is not available, use `left` property for positioning the indicator
          // This avoids rendering delay until we are able to calculate translateX
          width
            ? { transform: [{ translateX }] }
            : { left: `${(100 / routes.length) * navigationState.index}%` },
          style,
        ]}
      >
        <LinearGradient
          start={{ x: 0.22, y: 0.5 }}
          end={{ x: 1, y: 1 }}
          locations={[0, 1]}
          colors={['#078CF3', '#01F6C6']}
          style={{ width: 36, height: 3 }}
        />
      </Animated.View>
    );
  }
}
