// @refresh react
import React from 'react';
import {StyleSheet} from 'react-native';
import Animated from 'react-native-reanimated';
import Tagg from './Tagg';
import {PROFILE_CUTOUT_BOTTOM_Y} from '../../constants';
import {StatusBarHeight} from '../../utils';

const {View, ScrollView, interpolate, Extrapolate} = Animated;
interface TaggsBarProps {
  y: Animated.Value<number>;
  profileBodyHeight: number;
}
const TaggsBar: React.FC<TaggsBarProps> = ({y, profileBodyHeight}) => {
  const taggs: Array<JSX.Element> = [];
  for (let i = 0; i < 10; i++) {
    taggs.push(<Tagg key={i} style={styles.tagg} />);
  }
  const shadowOpacity: Animated.Node<number> = interpolate(y, {
    inputRange: [
      PROFILE_CUTOUT_BOTTOM_Y + profileBodyHeight,
      PROFILE_CUTOUT_BOTTOM_Y + profileBodyHeight + 20,
    ],
    outputRange: [0, 0.2],
    extrapolate: Extrapolate.CLAMP,
  });
  const paddingTop: Animated.Node<number> = interpolate(y, {
    inputRange: [
      0,
      PROFILE_CUTOUT_BOTTOM_Y + profileBodyHeight - 30,
      PROFILE_CUTOUT_BOTTOM_Y + profileBodyHeight,
    ],
    outputRange: [20, 20, StatusBarHeight],
    extrapolate: Extrapolate.CLAMP,
  });
  const paddingBottom: Animated.Node<number> = interpolate(y, {
    inputRange: [
      0,
      PROFILE_CUTOUT_BOTTOM_Y + profileBodyHeight - 30,
      PROFILE_CUTOUT_BOTTOM_Y + profileBodyHeight,
    ],
    outputRange: [30, 30, 15],
    extrapolate: Extrapolate.CLAMP,
  });
  return (
    <View style={[styles.container, {shadowOpacity}]}>
      <ScrollView
        horizontal
        showsHorizontalScrollIndicator={false}
        style={{paddingTop, paddingBottom}}
        contentContainerStyle={styles.contentContainer}>
        {taggs}
      </ScrollView>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'white',
    shadowColor: '#000',
    shadowRadius: 10,
    shadowOffset: {width: 0, height: 2},
    zIndex: 1,
  },
  contentContainer: {
    alignItems: 'center',
    paddingHorizontal: 15,
  },
  tagg: {
    marginHorizontal: 14,
  },
});

export default TaggsBar;