import React, {useLayoutEffect} from 'react';
import {ActivityIndicator, StyleSheet, View} from 'react-native';
import {StackScreenProps} from '@react-navigation/stack';
import WebView from 'react-native-webview';
import {THEME_COLOR} from '@common/constants';
import { CommonParamList } from '@common/router/CommonParamList.ts';

type Props = StackScreenProps<CommonParamList, 'WebView'>;

export default function WebViewScreen(props: Props) {
  const {navigation, route} = props;

  useLayoutEffect(() => {
    navigation.setOptions({
      title: route.params.title ?? '',
    });
  }, [navigation, route.params.title]);

  return (
    <View style={styles.container}>
      <WebView
        contentInsetAdjustmentBehavior="scrollableAxes"
        style={styles.webview}
        originWhitelist={['*']}
        dataDetectorTypes={'none'}
        source={{
          uri: route.params.url,
        }}
        javaScriptEnabled={true}
        startInLoadingState={true}
        renderLoading={() => {
          return (
            <ActivityIndicator
              style={styles.activityIndicator}
              color={THEME_COLOR}
              size="large"
              animating={true}
            />
          );
        }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  webview: {
    flex: 1,
  },
  activityIndicator: {
    position: 'absolute',
    alignSelf: 'center',
    top: 100,
  },
});
