import type { ComponentProps } from 'react';
import { useWindowDimensions, View } from 'react-native';

interface ScrollViewInertialBackgroundProps {
  topColor?: string;
  bottomColor?: string;
  spacer?: number;
}

/**
 * @public
 * @category UI
 * @name ScrollViewInertialBackground
 * @description
 * iOS `ScrollView` 콘텐츠의 위, 아래 공간에 배경색을 추가해서, 스크롤 했을 때 자연스러운 시각 효과를 제공해요.
 * iOS에서는 스크롤이 끝에 도달했을 때 살짝 튕기는 듯한 [Bounce 효과](https://medium.com/@wcandillon/ios-bounce-list-effect-with-react-native-5102e3a83999)가 발생해요. 이때 콘텐츠 위, 아래 공간에 배경색을 설정하면 더 일관된 유저 경험을 제공할 수 있어요.
 *
 * @param {object} [props] - 컴포넌트에 전달되는 `props` 객체예요.
 * @param {string} [props.topColor] - 스크롤 위쪽 영역에 적용할 배경색이에요. 기본값은 시스템 테마에 맞춰 자동으로 적용되는 `adaptive.background`에요.
 * @param {string} [props.bottomColor] - 스크롤 아래쪽 영역에 적용할 배경색이에요. 기본값은 시스템 테마에 맞춰 자동으로 적용되는 `adaptive.background`에요.
 * @param {number} [props.spacer] - 배경색이 적용될 콘텐츠 위, 아래 공간 사이의 공간 크기를 지정해요. 기본값은 [`useWindowDimensions`](https://reactnative.dev/docs/next/usewindowdimensions)로 가져온 화면 높이를 사용해요.
 *
 * @example
 *
 * ### 스크롤 뷰 위, 아래에 배경색을 추가하기
 *
 * 스크롤 뷰 위에 빨간색, 아래에 파란색 배경색을 추가해요. 스크롤을 벗어난 영역에 배경색이 적용돼요.
 *
 * ```tsx
 * import { ScrollView, View, Text } from 'react-native';
 * import { ScrollViewInertialBackground } from 'react-native-bedrock';
 *
 * const dummies = Array.from({ length: 20 }, (_, i) => i);
 *
 * export function InertialBackgroundExample() {
 *   return (
 *     <ScrollView>
 *       <ScrollViewInertialBackground topColor="red" bottomColor="blue" />
 *       {dummies.map((i) => (
 *         <View
 *           key={`dummy-${i}`}
 *           style={{ width: '100%', height: 100, borderBottomColor: 'black', borderBottomWidth: 1 }}
 *         >
 *           <Text>스크롤을 해보세요.</Text>
 *         </View>
 *       ))}
 *     </ScrollView>
 *   );
 * }
 * ```
 */
export function ScrollViewInertialBackground({
  topColor,
  bottomColor,
  spacer: _spacer,
}: ScrollViewInertialBackgroundProps) {
  const windowHeight = useWindowDimensions().height;

  const spacer = _spacer ?? windowHeight;
  const topBackgroundColor = topColor ?? DEFAULT_BACKGROUND_COLOR;
  const bottomBackgroundColor = bottomColor ?? DEFAULT_BACKGROUND_COLOR;

  return (
    <>
      <HiddenView
        style={{
          height: spacer,
          top: -spacer,
          backgroundColor: topBackgroundColor,
        }}
      />
      <HiddenView
        style={{
          height: spacer,
          /** CTA GradientHeight 영역만큼 줄여줍니다. */
          bottom: -spacer + GRADIENT_HEIGHT,
          backgroundColor: bottomBackgroundColor,
        }}
      />
    </>
  );
}

function HiddenView({ style, pointerEvents = 'none', ...props }: ComponentProps<typeof View>) {
  return (
    <View
      pointerEvents={pointerEvents}
      style={[{ position: 'absolute', width: '100%', zIndex: -1, left: 0, right: 0 }, style]}
      {...props}
    />
  );
}

/**
 * FIXME:
 * BottomCTA의 Gradient 값입니다. peerDeps 를 피하기위해 고정값으로 둡니다.
 */
const GRADIENT_HEIGHT = 37;
const DEFAULT_BACKGROUND_COLOR = '#ffffff';