import React, {ReactNode, ReactElement} from 'react';
import {Animated} from 'react-native';
import {CollapsibleInfo} from '@interfaces/generic';

import {styles} from './styles';

interface CustomTabBarProps {
  collapsibleInfo: CollapsibleInfo;
  children: ReactNode;
}

export function WithCollapsible({
  collapsibleInfo,
  children,
}: CustomTabBarProps): ReactElement {
  const translateY = collapsibleInfo.scrollY.interpolate({
    extrapolate: 'clamp',
    inputRange: [0, collapsibleInfo.headerHeight],
    outputRange: [collapsibleInfo.headerHeight, 0],
  });

  return (
    <Animated.View
      style={[{transform: [{translateY}]}, styles.collapsibleContainer]}
      onLayout={collapsibleInfo.onBarLayout}>
      {children}
    </Animated.View>
  );
}
