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

import {UserType} from '../../types';
import ProfileCutout from './ProfileCutout';
import ProfileHeader from './ProfileHeader';
import ProfileBody from './ProfileBody';
import TaggsBar from '../taggs/TaggsBar';
import Feed from './Feed';

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 (
    <Animated.ScrollView
      style={styles.container}
      onScroll={(e) => y.setValue(e.nativeEvent.contentOffset.y)}
      showsVerticalScrollIndicator={false}
      scrollEventThrottle={1}
      stickyHeaderIndices={[2, 4]}>
      <ProfileCutout>
        <ProfileHeader />
      </ProfileCutout>
      <ProfileBody {...{onLayout}} />
      <TaggsBar {...{y, profileBodyHeight}} />
      <Feed {...{user}} />
    </Animated.ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

export default Content;