import React, {useState} from 'react';
import {LayoutChangeEvent, StyleSheet, View} from 'react-native';
import {Text} from 'react-native-animatable';
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>;
  isProfileView: boolean;
}
const Content: React.FC<ContentProps> = ({y, isProfileView}) => {
  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 {...{isProfileView}} />
      </ProfileCutout>
      <ProfileBody {...{onLayout, isProfileView}} />
      <TaggsBar {...{y, profileBodyHeight, isProfileView}} />
      {!isProfileView ? (
        <View style={styles.momentsContainer}>
          {defaultMoments.map((title, index) => (
            <Moment key={index} title={title} images={[]} />
          ))}
        </View>
      ) : (
        <React.Fragment />
      )}
    </Animated.ScrollView>
  );
};

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

export default Content;
