import React, {useState} from 'react';
import {LayoutChangeEvent, StyleSheet, View} from 'react-native';
import Animated from 'react-native-reanimated';
import {defaultMoments} from '../../constants';
import {SCREEN_HEIGHT} from '../../utils';
import TaggsBar from '../taggs/TaggsBar';
import Moment from './Moment';
import ProfileBody from './ProfileBody';
import ProfileCutout from './ProfileCutout';
import ProfileHeader from './ProfileHeader';

interface ContentProps {
  y: Animated.Value<number>;
}
const Content: React.FC<ContentProps> = ({y}) => {
  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}} />
      <View style={styles.momentsContainer}>
        {defaultMoments.map((title, index) => (
          <Moment key={index} title={title} images={[]} />
        ))}
      </View>
    </Animated.ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  momentsContainer: {
    backgroundColor: '#f2f2f2',
    paddingBottom: SCREEN_HEIGHT / 10,
  },
});

export default Content;