import * as React from 'react';
import {
  StyleSheet,
  View,
  Text,
  Button,
  NativeEventEmitter,
  Alert,
} from 'react-native';
import XcodeTemplateProject from '@xupd/XcodeTemplateProject';

const calendarManagerEmitter = new NativeEventEmitter(XcodeTemplateProject);
const messageListener = calendarManagerEmitter.addListener(
  'MessageEvent',
  function (map) {
    Alert.alert(`Receive Android message: ${map.key}`);
  }
);

export default class App extends React.Component {
  /**
   * 移除注册的监听
   */
  componentWillUnmount() {
    if (messageListener) {
      messageListener.remove();
    }
  }
  render() {
    /**
     * 调用原生方法
     */
    const nativeNormalMethod = () => {
      XcodeTemplateProject.nativeNormalMethod();
    };
    /**
     * 传递参数到原生方法
     */
    const nativeMethodWithParams = () => {
      XcodeTemplateProject.nativeMethodWithParams(1, 2);
    };
    /**
     * 调用原生方法用Callback返回数据到JS
     */
    const nativeMethodWithCallback = () => {
      XcodeTemplateProject.nativeMethodWithCallback(
        2,
        3,
        (result) => {
          Alert.alert(`Result is ${result}`);
        },
        (e) => {
          Alert.alert(`Get result error:${e}`);
        }
      );
    };
    /**
     * 调用原生方法用Promise返回数据到JS
     */
    const nativeMethodWithPromise = () => {
      XcodeTemplateProject.nativeMethodWithPromise(3, 4).then((map) => {
        Alert.alert(`Result is ${map.result}`);
      });
    };
    /**
     * 触发原生发送事件到JS
     */
    const nativeSendCustomEvent = () => {
      XcodeTemplateProject.nativeSendCustomEvent();
    };

    return (
      <View style={styles.container}>
        <Text style={styles.textStyle}>ReactNative混合组件桥接方法示例</Text>
        <View style={styles.buttonBackground}>
          <Button
            onPress={nativeNormalMethod}
            title="直接调用原生方法"
            color="#8abbfa"
          />
        </View>
        <View style={styles.buttonBackground}>
          <Button
            onPress={nativeMethodWithParams}
            title="传递参数到原生方法"
            color="#4996f7"
          />
        </View>
        <View style={styles.buttonBackground}>
          <Button
            onPress={nativeMethodWithCallback}
            title="调用原生方法用Callback返回数据到JS"
            color="#1477f5"
          />
        </View>
        <View style={styles.buttonBackground}>
          <Button
            onPress={nativeMethodWithPromise}
            title="调用原生方法用Promise返回数据到JS"
            color="#095fce"
          />
        </View>
        <View style={styles.buttonBackground}>
          <Button
            onPress={nativeSendCustomEvent}
            title="触发原生发送事件到JS"
            color="#064596"
          />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  textStyle: {
    fontSize: 23,
    width: '100%',
    textAlign: 'center',
    marginBottom: 20,
    color: 'red',
  },
  buttonBackground: {
    marginTop: 16,
    paddingHorizontal: 24,
    marginBottom: 16,
  },
});