import type { BlurViewProps as InternalBlurViewProps } from '@react-native-bedrock/native/@react-native-community/blur';
import { View, ViewProps } from 'react-native';
import { ReactNativeBlurModule } from './ReactNativeBlurModule';
import { isBlurNativeModuleSupported } from './constants';

export type BlurType = InternalBlurViewProps['blurType'];

export interface BlurViewProps extends ViewProps {
  blurType?: BlurType;
  blurAmount?: number;
  /**
   * Vibrancy Effect를 추가합니다
   * @see https://zeddios.tistory.com/1140
   * @ref https://developer.apple.com/documentation/uikit/uivibrancyeffect
   */
  vibrancyEffect?: boolean;
  reducedTransparencyFallbackColor?: string;
}

/**
 * @public
 * @category UI
 * @name BlurView
 * @description
 * `BlurView` 컴포넌트는 iOS에서 배경을 블러 처리하는 UI 효과를 줘요. 이 컴포넌트는 배경을 흐리게 표시해요. iOS에서만 지원되고
 *  Android에서는 기본 [`View`](https://reactnative.dev/docs/0.72/view) 를 렌더링해요.
 *
 * 블러의 강도를 조절할 수 있고, [Vibrancy 효과](https://developer.apple.com/documentation/uikit/uivibrancyeffect?language=objc)를 적용할 수 있어요. 블러가 적용되지 않을 경우에는 [`reducedTransparencyFallbackColor`](https://github.com/Kureev/react-native-blur/tree/v4.3.2?tab=readme-ov-file#blurview)를 사용해 배경색을 설정할 수 있어요.
 *
 * `isSupported` 속성을 통해 현재 기기에서 블러가 지원되는지 확인할 수 있어요. iOS 5.126.0 이상에서만 블러 효과가 지원되고, Android에서는 지원되지 않아요.
 *
 * @param {BlurViewProps} [props] props `BlurView`에 전달할 속성들이에요. `react-native`의 `ViewProps`를 상속하므로, 기본적인 레이아웃 속성도 함께 사용할 수 있어요. [@react-native-community/blur](https://github.com/Kureev/react-native-blur/tree/v4.3.2?tab=readme-ov-file#blurview)의 속성과 같아요.
 * @param {BlurType} [props.blurType] 블러의 유형을 설정해요. `light`, `dark`, `extraDark` 같은 값을 사용해 블러의 스타일을 정의할 수 있어요.
 * @param {number} [props.blurAmount=10] 블러 효과의 강도를 설정해요. 값이 클수록 블러 효과가 더 강해져요. 기본값은 `10`이며 `0`부터 `100`까지 설정할 수 있어요.
 * @param {boolean} [props.vibrancyEffect=false] Vibrancy Effect를 활성화해요. Vibrancy 효과는 블러된 배경 위의 콘텐츠를 더 생동감 있게 보이도록 해줘요. iOS에서만 지원되며, 기본값은 `false`예요.
 * @param {string} [props.reducedTransparencyFallbackColor] 투명도가 제한될 경우 사용할 대체 배경색이에요. 블러가 지원되지 않거나 제대로 렌더링되지 않을 때 유용해요.
 *
 * @returns {JSX.Element} iOS에서는 블러가 적용된 `BlurView` 또는 `VibrancyView` 컴포넌트를 반환하고, Android에서는 기본 `View`를 반환해요.
 *
 * ::: warning 유의할 점
 * `BlurView`는 iOS에서만 지원돼요. Android에서는 기본 `View`가 렌더링되며, 블러 효과가 적용되지 않아요.
 * :::
 *
 * @example
 *
 * ### `BlurView`를 사용해 텍스트를 블러 처리하기
 *
 * ```tsx
 * import { View, Text, StyleSheet } from 'react-native';
 * import { BlurView } from 'react-native-bedrock';
 *
 * export function BlurViewExample() {
 *  return (
 *    <View style={styles.container}>
 *      <Text style={styles.absolute}>Blurred Text</Text>
 *      <BlurView style={styles.absolute} blurType="light" blurAmount={1} />
 *      <Text>Non Blurred Text</Text>
 *    </View>
 *  );
 * }
 *
 * const styles = StyleSheet.create({
 *  container: {
 *    justifyContent: 'center',
 *    alignItems: 'center',
 *    width: '100%',
 *    height: 300,
 *  },
 *  absolute: {
 *    position: 'absolute',
 *    top: 0,
 *    left: 0,
 *    bottom: 0,
 *    right: 0,
 *  },
 * });
 * ```
 *
 * @see [iOS Vibrancy Effect Documentation](https://developer.apple.com/documentation/uikit/uivibrancyeffect)
 * @see [Zeddios Blog 설명](https://zeddios.tistory.com/1140)
 */

export function BlurView({
  blurType,
  blurAmount = 10,
  reducedTransparencyFallbackColor,
  vibrancyEffect = false,
  ...viewProps
}: BlurViewProps) {
  if (!isBlurNativeModuleSupported || ReactNativeBlurModule == null) {
    return <View {...viewProps} />;
  }

  const Component = vibrancyEffect ? ReactNativeBlurModule.VibrancyView : ReactNativeBlurModule.BlurView;

  return (
    <Component
      blurAmount={blurAmount}
      blurType={blurType}
      reducedTransparencyFallbackColor={reducedTransparencyFallbackColor}
      {...viewProps}
    />
  );
}

BlurView.isSupported = isBlurNativeModuleSupported;