/**
 * @flow
 */

import React, { Component, Element } from 'react';
import { connect } from 'react-redux';
import {
  TouchableOpacity,
  View,
  StatusBar,
  ScrollView,
  Dimensions,
  StyleSheet,
  Platform,
  NativeModules,
  BackAndroid,
  NativeAppEventEmitter,
} from 'react-native';
import { compose } from 'redux';
import DownloadModal from './DownloadModal';
import { reloadUpdate, downloadUpdate, } from './update';
import hotUpdate from './action';


const styles = StyleSheet.create({
  container: {
    flex: 1,
    position: 'absolute',
    bottom: 0,
    top: 0,
    left: 0,
    right: 0,
  },
});

type PropsType = {
  progress: number,
  showDialog: boolean,
  path: string,
  hash: string,
  setShowDialog: ()=>{},
  progressEdit: ()=>{},
  setPath: ()=>{},
  setHash: ()=>{},
}

class HotUpdateLoading extends Component {
  constructor(props:PropsType) {
    super(props);
    this.downloadListener = null;
  }

  componentDidMount() {
    const {
      setShowDialog,
      progressEdit,
      setPath,
      setHash,
    } = this.props;
    this.downloadListener = NativeAppEventEmitter.addListener(
      'RCTHotUpdateDownloadProgress', (e) => {
        console.log('DownloadProgress:', e);
        const progress = Number(e.received) / Number(e.total);
        if (progress === 2) {
          setShowDialog(true);
          setPath(e.path);
          setHash(e.hash);
          progressEdit(progress);
        } else if (progress === -2) {
          // 取消热更新更新
          setShowDialog(false);
          progressEdit(progress);
          setPath('');
          setHash('');
          // 退出APP
          //if (Platform.OS === 'ios') {
          //  NativeModules.RNExitApp.exitApp()
          //} else {
          //  BackAndroid.exitApp()
          //}
        } else if (progress === -1) {
          progressEdit(progress);
        } else if (progress === 10) {
          setHash(e.hash);
          progressEdit(progress);
        } else {
          const num = Number(progress.toFixed(2));
          progressEdit(num);
        }
      },
    );
  }

  componentWillUnmount() {
    if (this.downloadListener) {
      this.downloadListener.remove();
    }
  }


  render() {
    const {
      showDialog, hash, path,
      progress, setShowDialog,
      progressEdit, setPath, setHash,
    } = this.props;
    return (
      showDialog
        ? (
          <View style={styles.container}>
            <DownloadModal
              style={{ flex: 1 }}
              progress={progress}
              reloadUpdate={() => reloadUpdate(hash, true)}
              downloadUpdate={() => downloadUpdate(path, true, hash)}
              setShowDialog={() => {
                setShowDialog(false);
                setPath('');
                setHash('');
                progressEdit(-2);
              }}
            />
          </View>
        ) : null
    );
  }
}

function propsMapping({ hotUpdateLoading }) {
  return {
    ...hotUpdateLoading,
  };
}
function actionMapping(dispatch) {
  return {
    setShowDialog: compose(dispatch, hotUpdate.showDialog),
    progressEdit: compose(dispatch, hotUpdate.progressEdit),
    setPath: compose(dispatch, hotUpdate.setPath),
    setHash: compose(dispatch, hotUpdate.setHash),
  };
}

export default connect(propsMapping, actionMapping)(HotUpdateLoading);
