/**
 * @flow
 */

import React, { Component } from 'react';
import { Circle } from 'react-native-progress';
import {
  View,
  Text,
  Platform,
  Dimensions,
  StyleSheet,
  NativeAppEventEmitter,
} from 'react-native';
import Button from '../ThemeButton';


const { width: deviceWidth } = Dimensions.get('window');
type Props = {
  progress : number,
  reloadUpdate: () => void,
  downloadUpdate: () => void,
  setShowDialog: () => void,
}
type State = {
  progress: number,
}

// const isLessLollipop = Platform.OS === 'android' && Platform.Version < 21

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    paddingTop: Platform.OS === 'ios' ? 64 : 44,
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
  },
  buttonTextColor: {
    color: '#2E75C5',
    fontSize: 16,
  },
  mainButton: {
    width: Number(deviceWidth - 60),
    marginTop: 5,
    backgroundColor: '#fff',
    marginBottom: 5,
  },
});


class DownloadModal extends Component {
  constructor(props:Props) {
    super(props);
    this.state = {
      progress: props.progress || -1,
    };
  }

  state:State

  componentWillReceiveProps(nextProps: Object) {
    const { progress } = nextProps;
    // console.log('componentWillReceiveProps', progress)
    if (progress !== this.state.progress) {
      this.setState({ progress });
    }
  }

  renderButton = (state, prop) => {
    if (state.progress === 2) {
      return (
        <View
          style={{
            width: Number(deviceWidth - 60),
            flexDirection: 'row',
            justifyContent: 'center',
            alignItems: 'center',
            borderTopColor: '#c9c9c9',
            borderTopWidth: StyleSheet.hairlineWidth,
          }}
        >
          <Button
            titleStyle={[styles.buttonTextColor]}
            buttonStyle={{
              backgroundColor: '#fff',
            }}
            containerStyle={{ flex: 1 }}
            title="退出"
            onPress={() => {
              NativeAppEventEmitter.emit('RCTHotUpdateDownloadProgress',
                {
                  received: -2,
                  total: 1,
                });
            }}
          />
          <View
            style={{
              width: StyleSheet.hairlineWidth,
              height: 50,
              backgroundColor: '#c9c9c9',
            }}
          />
          <Button
            titleStyle={[styles.buttonTextColor]}
            buttonStyle={{
              backgroundColor: '#fff',
            }}
            containerStyle={{ flex: 1 }}
            title="开始下载"
            onPress={() => {
              prop.downloadUpdate();
            }}
          />
        </View>
      );
    } if (state.progress === 10) {
      return (
        <Button
          titleStyle={styles.buttonTextColor}
          buttonStyle={styles.mainButton}
          title="重启"
          onPress={() => {
            prop.setShowDialog();
            setTimeout(() => prop.reloadUpdate());
          }}
        />
      );
    }
    return (
      <Button
        titleStyle={styles.buttonTextColor}
        buttonStyle={styles.mainButton}
        title="退出"
        onPress={() => {
          NativeAppEventEmitter.emit('RCTHotUpdateDownloadProgress',
            {
              received: -2,
              total: 1,
            });
        }}
      />
    );
  }


  render() {
    let title = '正在下载资源，请稍后...';
    if (this.state.progress === 2) {
      title = '发现新资源，要下载吗？';
    } else if (this.state.progress === 10) {
      title = '已完成下载， 需要重启应用';
    } else if (this.state.progress === -1) {
      title = '下载失败，请稍后再试...';
    }

    return (
      <View style={styles.container}>
        <View
          style={{
            width: Number(deviceWidth - 60),
            backgroundColor: 'white',
            alignItems: 'center',
            borderRadius: 10,
          }}
        >
          <View
            style={{
              flexDirection: 'row',
              justifyContent: 'center',
              alignItems: 'center',
            }}
          >
            { this.state.progress !== -1 && this.state.progress !== 2
              ? (
                <Circle
                  style={{ margin: 10 }}
                  size={50}
                  direction="clockwise" // 逆时针 顺时针，默认顺时针
                  progress={this.state.progress}
                  showsText
                  textStyle={{ fontSize: 14 }}
                  indeterminate={false}
                />
              ) : <View style={{ height: 70 }} />
            }
            <Text
              style={{
                marginTop: 10,
                paddingBottom: 10,
                fontSize: 16,
                justifyContent: 'center',
                alignItems: 'center',
                textAlign: 'center',
                //borderBottomColor: '#c9c9c9',
                //borderBottomWidth: StyleSheet.hairlineWidth,
              }}
            >
              { title }
            </Text>
          </View>
          <View
            style={{
              height: 1 / 3,
              width: Number(deviceWidth - 60),
              backgroundColor: '#c9c9c9',
            }}
          />
          {this.renderButton(this.state, this.props)}
        </View>
      </View>
    );
  }
}
export default DownloadModal;
