import React from 'react'
import { View, Text, Image, StyleSheet, ActivityIndicator } from 'react-native'
import RootSiblings from 'react-native-root-siblings'
import successPng from './success.png'
import { errorHandler, shouleBeObject, successHandler } from '../utils'

const styles = StyleSheet.create({
  toastView: {
    width: 76,
    height: 76,
    justifyContent: 'center',
    alignItems: 'center'
  },
  toastIcon: {
    width: 55,
    height: 55
  },
  toastContent: {
    color: '#FFFFFF',
    textAlign: 'center'
  },
  textToastContent: {
    paddingTop: 10,
    paddingBottom: 10,
    paddingLeft: 15,
    paddingRight: 15,
    lineHeight: 20,
    color: '#FFFFFF',
    textAlign: 'center'
  },
  container: {
    zIndex: 10000,
    position: 'absolute',
    width: '100%',
    height: '100%',
    alignItems: 'center',
    justifyContent: 'center'
  },
  itemView: {
    backgroundColor: '#fff',
    alignItems: 'center',
    width: '100%',
    justifyContent: 'center',
    borderBottomWidth: 1,
    borderBottomColor: 'rgba(0,0,0,0.5)'
  },
  grayBlock: {
    width: 120,
    height: 120,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'rgba(20,20,20,0.8)',
    borderRadius: 8,
    flexDirection: 'column'
  },
  textGrayBlock: {
    width: 180,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'rgba(20,20,20,0.8)',
    borderRadius: 8,
    flexDirection: 'column'
  }
})

class WXLoading extends React.Component {
  constructor () {
    super()
    this.state = {
      animating: true
    }
  }

  render () {
    const { title = 'loading' } = this.props
    return (
      <View style={styles.container}>
        <View style={styles.grayBlock}>
          <ActivityIndicator
            animating={this.state.animating}
            style={{ flex: 1 }}
            size='small'
            color='#eee'
          />
          <Text style={{
            paddingTop: 10,
            position: 'absolute',
            bottom: '15%',
            color: 'white',
            fontSize: 15
          }}>{title}</Text>
        </View>
      </View>
    )
  }
}

function showToast (options) {
  const isObject = shouleBeObject(options)
  if (!isObject.res) {
    const res = { errMsg: `showLoading${isObject.msg}` }
    console.error(res.errMsg)
    return Promise.reject(res)
  }

  const res = { errMsg: 'showToast:ok' }
  let {title = '', icon = 'success', image, duration = 1500, mask, success, fail, complete} = options || {} // eslint-disable-line

  let ToastView

  if (image) {
    ToastView = <View style={styles.container}>
      <View style={styles.grayBlock}>
        <View style={styles.toastView}>
          <Image source={image} style={styles.toastIcon} />
          <Text style={styles.toastContent}>{title || ''}</Text>
        </View>
      </View>
    </View>
  } else if (icon === 'loading') {
    ToastView = <WXLoading title={title} />
  } else if (icon === 'none') {
    ToastView = <View style={styles.container}>
      <View style={styles.textGrayBlock}>
        <Text style={styles.textToastContent}>{title || ''}</Text>
      </View>
    </View>
  } else {
    ToastView = <View style={styles.container}>
      <View style={styles.grayBlock}>
        <View style={styles.toastView}>
          <Image source={successPng} style={styles.toastIcon} />
          <Text style={styles.toastContent}>{title || ''}</Text>
        </View>
      </View>
    </View>
  }

  try {
    // setTimeout fires incorrectly when using chrome debug #4470
    // https://github.com/facebook/react-native/issues/4470
    global.wxToastRootSiblings && global.wxToastRootSiblings.destroy()

    global.wxToastRootSiblings = new RootSiblings(ToastView)
    setTimeout(() => {
      global.wxToastRootSiblings && global.wxToastRootSiblings.update(ToastView)
      success && success()
    }, 100)
    if (duration > 0) {
      setTimeout(() => {
        console.log('destroy')
        global.wxToastRootSiblings && global.wxToastRootSiblings.destroy()
      }, duration)
    }
    return successHandler(success, complete)(res)
  } catch (e) {
    res.errMsg = `showToast:fail invalid ${e}`
    return errorHandler(fail, complete)(res)
  }
}

function showLoading (options) {
  const isObject = shouleBeObject(options)
  if (!isObject.res) {
    const res = { errMsg: `showLoading${isObject.msg}` }
    console.error(res.errMsg)
    return Promise.reject(res)
  }

  const { title = '', mask, success, fail, complete } = options || {}

  return showToast({
    title,
    icon: 'loading',
    duration: 0,
    mask,
    success,
    fail,
    complete
  })
}

function hideToast () {
  global.wxToastRootSiblings && global.wxToastRootSiblings.destroy()
  global.wxToastRootSiblings = undefined
}

function hideLoading () {
  hideToast()
}

export {
  showToast,
  showLoading,
  hideToast,
  hideLoading
}
