import React from 'react';
import {
  Image,
  Keyboard,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';
import {NavigationProp, useNavigation} from '@react-navigation/native';
import {LoginParamList} from '@app/routes/login/LoginParamList.ts';

type Props = {
  checked: boolean; // 当前勾选状态
  onPress?: () => void; // 点击勾选/取消勾选按钮
};

/**
 * @description: 登录或注册界面中的隐私声明或注册协议勾选区域
 */
export default function AgreementChecking(props: Props) {
  const navigation = useNavigation<NavigationProp<LoginParamList, 'Login'>>();
  return (
    <View style={styles.container}>
      <TouchableOpacity
        style={styles.button}
        onPress={() => {
          props.onPress && props.onPress();
        }}>
        <Image
          style={styles.buttonImage}
          source={
            props.checked
              ? require('@app/assets/images/common/common_radio_button_selected.png')
              : require('@app/assets/images/common/common_radio_button_unselected.png')
          }
        />
      </TouchableOpacity>
      <Text style={styles.text}>
        {'我已阅读并同意 '}
        <Text
          style={styles.buttonText}
          onPress={() => {
            Keyboard.dismiss();
            navigation.navigate('WebView', {
              url: 'https://www.51trust.com/privacy.html',
              title: '用户隐私政策',
            });
          }}>
          隐私声明
        </Text>
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    paddingRight: 25,
    paddingLeft: 15,
  },
  button: {
    paddingLeft: 10,
    paddingRight: 8,
    alignItems: 'center',
    justifyContent: 'center',
  },
  buttonImage: {
    width: 14,
    height: 14,
  },
  text: {
    marginVertical: 10,
    flex: 1,
    color: '#11102C',
    fontSize: 14,
    lineHeight: 18,
  },
  buttonText: {
    color: '#0E84FA',
    textDecorationLine: 'underline',
  },
});
