import {ScrollView} from 'react-native-gesture-handler';
import {BottomModalFooter} from '@components';
import {Navigation} from '@interfaces/navigation';
import {Screens} from '@shared/constants';

import {MakeRequestScrollContent} from './components/MakeRequestScrollContent';
import {useMakeRequestScreen} from './hooks/useMakeRequestScreen';
import {styles} from './styles';

function MakeRequest({route: {params}}: Navigation<Screens.MAKE_REQUEST>) {
  const {
    scrollViewRef,
    scrollContentProps,
    footerProps,
    backgroundColor,
    showOnlyPolicySelector,
  } = useMakeRequestScreen(params);

  return (
    <>
      <ScrollView
        bounces={false}
        ref={scrollViewRef}
        style={{backgroundColor}}
        showsVerticalScrollIndicator={false}
        contentContainerStyle={[
          styles.contentContainer,
          showOnlyPolicySelector && styles.gap,
        ]}>
        <MakeRequestScrollContent {...scrollContentProps} />
      </ScrollView>
      <BottomModalFooter
        footer={{
          primaryButton: {
            text: footerProps.text,
            testID: 'sendRequestButton',
            onPress: footerProps.onPress,
            disabled: footerProps.disabled,
            isLoading: footerProps.isLoading,
          },
        }}
      />
    </>
  );
}

export default MakeRequest;