
/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  RefreshControl,
  TouchableOpacity,
  NativeAppEventEmitter,
} from 'react-native';
import { connect } from 'react-redux';
import { compose } from 'redux';
import Text from '../../components/Text';
import Button from '../../components/ThemeButton';
import TextInput from '../../components/TextInput';
import NavigationBar from '../../components/NavigationBar';
import BackButton from '../../components/BackButton';
import { push, pop } from '../../BasicNavigator/actions';
import hotUpdate from '../../components/HotUpdate/action';
import { updatePPKURL } from '../../utils/constants';


type Props = {};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
  titleContainer: {
    flex: 1,
    alignSelf: 'stretch',
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  imageTitle: {
    color: 'white',
    backgroundColor: 'transparent',
    fontSize: 24,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

class HotUpdatePage extends Component<Props> {
  constructor(props) {
    super(props);
    this.state = {
      hotPath: 'http://129.211.99.254:3333',
    };
  }

  render() {
    const { hotPath } = this.state;
    return (
      <View style={styles.container}>
        <NavigationBar
          title="热更新"
          left={<BackButton />}
        />
        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
          <TextInput
            defaultValue={hotPath}
            onChangeText={(text) => {
              this.setState({
                hotPath: text,
              });
            }}
          />
          <Button
            title="热更新"
            containerStyle={{ marginVertical: 10 }}
            onPress={() => {
              NativeAppEventEmitter.emit('RCTHotUpdateDownloadProgress',
                {
                  received: 2,
                  total: 1,
                  hash: `${Math.random()}`,
                  path: `${this.state.hotPath}${updatePPKURL()}`,
                });
            }}
          />
        </View>
      </View>
    );
  }
}


function actionMapping(dispatch) {
  return {
    pushTo: compose(dispatch, push),
    popTo: compose(dispatch, pop),
    setShowDialog: compose(dispatch, hotUpdate.showDialog),
    setPath: compose(dispatch, hotUpdate.setPath),
    setHash: compose(dispatch, hotUpdate.setHash),
  };
}

export default connect(null, actionMapping)(HotUpdatePage);
