import React, {useState} from 'react';
import {StyleSheet, LayoutChangeEvent} from 'react-native';
import Animated from 'react-native-reanimated';
const {ScrollView} = Animated;

import {UserType} from '../../types';
import ProfileCutout from './ProfileCutout';
import ProfileHeader from './ProfileHeader';
import ProfileBody from './ProfileBody';
import MomentsBar from './MomentsBar';
import Feed from './Feed';
import LinearGradient from 'react-native-linear-gradient';
import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';

interface ContentProps {
  y: Animated.Value<number>;
  user: UserType;
}
const Content: React.FC<ContentProps> = ({y, user}) => {
  const [profileBodyHeight, setProfileBodyHeight] = useState(0);
  const onLayout = (e: LayoutChangeEvent) => {
    const {height} = e.nativeEvent.layout;
    setProfileBodyHeight(height);
  };
  return (
    <ScrollView
      style={styles.container}
      onScroll={(e) => y.setValue(e.nativeEvent.contentOffset.y)}
      showsVerticalScrollIndicator={false}
      scrollEventThrottle={1}
      stickyHeaderIndices={[2, 4]}>
      <ProfileCutout>
        <ProfileHeader />
      </ProfileCutout>
      <ProfileBody {...{onLayout}} />
      <MomentsBar {...{y, profileBodyHeight}} />
      <Feed {...{user}} />
      <LinearGradient
        locations={[0.89, 1]}
        colors={['transparent', 'rgba(0, 0, 0, 0.6)']}
        style={styles.gradient}
      />
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  gradient: {
    height: SCREEN_HEIGHT,
    width: SCREEN_WIDTH,
    position: 'absolute',
  },
});

export default Content;