import { ComponentProps, ReactElement } from 'react';
import { Animated, View } from 'react-native';
import { useKeyboardAnimatedHeight } from './useKeyboardAnimatedHeight';

/**
 * @public
 * @category UI
 * @name KeyboardAboveView
 * @kind function
 * @description
 * 키보드가 화면에 나타날 때 자식 컴포넌트를 키보드 위로 자동으로 올려주는 컴포넌트예요.
 * 예를 들어, 텍스트 입력 중 "전송" 버튼을 키보드 위에 고정시키고 싶을 때 유용해요.
 *
 * @param {StyleProp<ViewStyle>} [props.style] - 추가적인 스타일을 적용할 수 있어요. 예를 들어, 배경색이나 크기 등을 설정할 수 있어요.
 * @param {ReactNode} [props.children] - 키보드가 나타날 때 키보드 위로 표시할 컴포넌트예요. 예를 들어, 버튼, 텍스트 입력창 등을 넣을 수 있어요.
 * @returns {ReactElement} - 키보드가 나타났을 때 키보드 위로 조정된 [`Animated.View`](https://reactnative.dev/docs/animated#createanimatedcomponent)를 반환해요.
 * @example
 *
 * ### 키보드 위로 요소를 올리기
 *
 * ```tsx
 * import { ScrollView, TextInput, View, Text } from 'react-native';
 * import { KeyboardAboveView } from 'react-native-bedrock';
 *
 * export function KeyboardAboveViewExample() {
 *   return (
 *     <>
 *       <ScrollView>
 *         <TextInput placeholder="placeholder" />
 *       </ScrollView>
 *
 *       <KeyboardAboveView>
 *         <View style={{ width: '100%', height: 50, backgroundColor: 'yellow' }}>
 *           <Text>Keyboard 위에 있어요.</Text>
 *         </View>
 *       </KeyboardAboveView>
 *     </>
 *   );
 * }
 * ```
 */
export function KeyboardAboveView({ style, children, ...props }: ComponentProps<typeof View>): ReactElement {
  const keyboardHeight = useKeyboardAnimatedHeight();

  return (
    <Animated.View
      style={[
        style,
        {
          transform: [
            {
              translateY: Animated.subtract(0, keyboardHeight),
            },
          ],
        },
      ]}
      {...props}
    >
      {children}
    </Animated.View>
  );
}
