import React from 'react';
import {View} from 'react-native';
import {KeyboardAwareScrollView} from 'react-native-keyboard-controller';
import {useTheme} from '@shared/theme';

import {useNewPost} from '../../hooks/useNewPost';
import {styles} from './styles';

interface Props {
  children: React.ReactNode;
}

export function ScrollContainer({children}: Props) {
  const {post} = useNewPost();
  const {theme} = useTheme();
  const showRichTextInput = Boolean(!post?.body || post.bodyHtml);

  return (
    <KeyboardAwareScrollView
      bounces={false}
      alwaysBounceHorizontal={false}
      contentContainerStyle={[
        styles.scrollContainer,
        {backgroundColor: theme.background.elements.default},
      ]}
      keyboardShouldPersistTaps="handled"
      showsVerticalScrollIndicator={showRichTextInput}>
      <View style={styles.publishPostContainer}>{children}</View>
    </KeyboardAwareScrollView>
  );
}
