import React, { Component } from 'react'
import {
  Text,
  View,
  StyleSheet,
  Dimensions,
  ScrollView,
  Modal,
  Image,
  FlatList,
  Clipboard,
  ToastAndroid,
  DeviceEventEmitter,
  Alert
} from 'react-native'
import { Container, Button, Row } from 'native-base'
import LinearGradient from 'react-native-linear-gradient'
import bcaLogo from 'src/design/image/dompet/bca.png'
import BackHeader from 'src/design/view/__global/back-header'
import {
  responsiveWidth,
  responsiveHeight,
  responsiveFontSize
} from 'react-native-responsive-dimensions'
import firebase from 'react-native-firebase'
import currencyFormat from '../../../../lib/util/currencyFormat'
// import TopUpBCA from '../_services/topUpBCA'
import { confirmTopUpBCA } from '../_services/topUpBCA'
import moment from 'moment'

// This is component Timer
function Timer({ interval }) {
  const pad = n => (n < 10 ? '0' + n : n)
  const duration = moment.duration(interval)
  return (
    <View style={styles.timerContainer}>
      <Text style={styles.textTime}> Batas waktu transfer dalam </Text>
      <Text style={styles.textTime}>{pad(duration.minutes())}</Text>
      <Text style={styles.textTime}> Menit </Text>
      <Text style={styles.textTime}>{pad(duration.seconds())}</Text>
      <Text style={styles.textTime}> Detik </Text>
    </View>
  )
}

class C_KonfirmasiTopUpViaATM extends Component {
  constructor(props) {
    super(props)

    this.state = {
      modalVisible: false,
      amount: this.props.navigation.state.params.amountTopUp,
      transactionCode: this.props.navigation.state.params.transactionCode,
      clipboardContent: null,
      // Timer
      start: 0,
      now: 0,
      laps: []
    }
  }

  componentDidMount() {
    this.start()
  }
  componentWillUnmount() {
    clearInterval(this.timer)
  }


  start = () => {
    const now = 1584959692593
    this.setState({
      start: now,
      now,
      laps: [0]
    })
    this.timer = setInterval(() => {
      this.setState({ now: new Date().getTime() })
    }, 500)
  };

  setModalVisible(visible) {
    this.setState({ modalVisible: visible })
  }

  handleTopUpBCA() {
    confirmTopUpBCA(this.state.transactionCode)
      .then(data => {
        if (data.success) {
          this.setModalVisible(true)
        }
      })
      .catch(error => {
        console.log(error.response.data)
        Alert.alert('Top Up Belum Terkonfirmasi', 'Silahkan menunggu beberapa saat, kami akan melakukan verifikasi pembayaran top up anda')
      })
  }

  readFromClipboard = async () => {
    // To get the text from clipboard
    const clipboardContent = await Clipboard.getString()
    this.setState({ clipboardContent })
  }

  writeToClipboard = async () => {
    // To copy the text to clipboard
    await Clipboard.setString(this.state.clipboardContent)
    ToastAndroid.showWithGravityAndOffset(
      'Nominal berhasil di salin',
      ToastAndroid.LONG,
      ToastAndroid.BOTTOM,
      25,
      50
    )
  }

  onTextClipboard = () => {
    this.setState({
      amount: this.props.navigation.state.params.amount_top_up
    })
  }
  // kuy latest code 2
  render() {
    firebase.analytics().setCurrentScreen('KONFIRMASI TOP UP')
    const { now, start, laps } = this.state
    const timer = now - start
    if (this.state.now > 1584959692593 + 10000000) {
      clearInterval(this.timer)
      return (
        <Text>Waktu Habis</Text>
      )
    }

    return (
      <Container style={styles.outerContainer}>
        <BackHeader navigate={this.props.navigation}>
          KONFIRMASI TOP UP
        </BackHeader>
        <View style={styles.container}>
          <Timer
            interval={laps.reduce((total, curr) => total + curr, 0) + timer}
            style={styles.timer}
          />
        </View>
        <ScrollView>
          <View style={styles.mainContent}>


            <View style={styles.transferToList}>
              <Text style={styles.transferToListText}>
                Transfer ke no. rekening :
              </Text>
              <Row style={styles.bankRow}>
                <Image source={bcaLogo} />
                <Text
                  style={[
                    styles.transferToListText,
                    styles.bankText,
                    styles.transferToBoldText
                  ]}
                >
                  Bank BCA, Jakarta
                </Text>
              </Row>
            </View>

            <View style={[styles.transferToList, styles.removeBorderBottom]}>
              <Text
                style={[styles.transferToListText, styles.transferToBoldText]}
              >
                093 3089 981
              </Text>
              <Text
                style={[styles.transferToListText, styles.transferToBoldText]}
              >
                a/n PT Halo Komunikasi Sejahtera
              </Text>
            </View>

            <View style={styles.transferValueWrapper}>
              <View style={styles.transferValueContentTop}>
                <Text style={styles.transferValueTitle}>
                  Jumlah yang harus ditransfer
                </Text>
                <Row style={styles.transferPriceWrapper}>
                  <View style={styles.priceWrapper}>
                    <Text style={styles.transferPrice}>
                      {currencyFormat(this.state.amount)}
                    </Text>
                    <View style={styles.triangle} />
                  </View>

                  <Button
                    style={styles.copyButton}
                    onPress={this.writeToClipboard}
                  >
                    <Text style={styles.copyButtonText}>Salin</Text>
                  </Button>
                </Row>
              </View>

              <View style={styles.transferValueContentBottom}>
                <Text style={styles.transferValueContentBottomText}>
                  Transfer tepat sampai{' '}
                  <Text style={styles.transferToBoldText}>3 digit akhir</Text>.
                  Perbedaan nomnal menghambat proses verifikasi
                </Text>
              </View>
            </View>
          </View>

          <View style={styles.noteWrapper}>
            <Text style={styles.noteTitle}>Petunjuk Transfer :</Text>
            <FlatList
              data={[
                { key: 'Minimal transfer dana sebesar Rp 10.000 (sepuluh ribu rupiah).' },
                {
                  key:
                    'Transfer dana tidak akan dikenakan biaya tambahan atau GRATIS.'
                }
              ]}
              renderItem={({ item, index }) => (
                <View>
                  <Text style={[styles.listFont, styles.listNumber]}>
                    {`${index + 1}. `}
                  </Text>

                  <Text style={[styles.listFont, styles.listText]}>
                    {item.key}
                  </Text>
                </View>
              )}
            />
          </View>
        </ScrollView>

        <View style={styles.buttonWrapper}>
          <Button
            style={styles.buttonStyle}
            onPress={() => { this.handleTopUpBCA() }}
          >
            <LinearGradient
              colors={['#FF7E5F', '#FF624B']}
              start={{ x: 0, y: 0 }}
              end={{ x: 1, y: 0 }}
              style={styles.buttonLinear}
            >
              <Text style={styles.buttonText}>Konfirmasi</Text>
            </LinearGradient>
          </Button>
        </View>

        <Modal
          animationType='slide'
          transparent
          visible={this.state.modalVisible}
        >
          <View style={styles.popupWrapper}>
            <View style={styles.popupContentWrapper}>
              <View style={styles.popupContentHead}>
                <Image
                  source={require('image/topUp/ic_top-up-berhasil.png')}
                  style={styles.imageTopUp}
                  resizeMode='contain'
                />
                <Text style={styles.popupTitle}>Berhasil !</Text>
              </View>
              <View style={styles.popupContentBody}>
                <Text style={styles.popupContent}>Top up via saldo tunai </Text>
                <Text style={styles.popupContent}>telah berhasil diproses</Text>
              </View>
              <View style={styles.popupContentFoot}>
                <Button
                  style={styles.buttonStyle}
                  onPress={() => {
                    DeviceEventEmitter.emit('RefreshSaldo')
                    this.setModalVisible(false)
                    this.props.navigation.navigate('vendorDashboard')
                  }}
                >
                  <LinearGradient
                    colors={['#FF7E5F', '#FF624B']}
                    start={{ x: 0, y: 0 }}
                    end={{ x: 1, y: 0 }}
                    style={styles.buttonLinear}
                  >
                    <Text style={styles.buttonText}>OK</Text>
                  </LinearGradient>
                </Button>
              </View>
            </View>
          </View>
        </Modal>
      </Container>
    )
  }
}

const screenWidth = Dimensions.get('window').width

const styles = StyleSheet.create({
  outerContainer: {
    backgroundColor: '#f7f7f7',
    flex: 1,
    position: 'relative'
  },
  mainContent: {
    paddingHorizontal: 20,
    paddingBottom: 20,
    backgroundColor: '#ffffff',
    borderBottomWidth: 1,
    borderColor: '#e4e4e4'
  },
  transferToList: {
    paddingVertical: 20,
    alignItems: 'center',
    borderBottomWidth: 1,
    borderColor: '#e4e4e4'
  },
  transferToListText: {
    color: '#555555',
    fontSize: 15
  },
  bankRow: {
    marginTop: 15
  },
  bankText: {
    marginLeft: 10
  },
  transferToBoldText: {
    fontWeight: 'bold'
  },
  transferValueWrapper: {
    borderRadius: 10,
    borderWidth: 1,
    borderColor: '#2490D4',
    marginTop: 10
  },
  transferValueContentTop: {
    backgroundColor: '#E8F3FA',
    borderTopLeftRadius: 8,
    borderTopRightRadius: 8,
    alignItems: 'center',
    padding: 25,
    paddingBottom: 20
  },
  transferValueTitle: {
    color: '#707273',
    fontSize: 15,
    fontWeight: 'bold'
  },
  transferPriceWrapper: {
    alignItems: 'center',
    marginTop: 15
  },
  priceWrapper: {
    position: 'relative'
  },
  triangle: {
    backgroundColor: '#1C8CD2',
    width: 20,
    height: 20,
    position: 'absolute',
    transform: [{ rotate: '45deg' }],
    bottom: -34,
    right: 14
  },
  copyButton: {
    backgroundColor: 'transparent',
    borderRadius: 8,
    elevation: 0,
    borderWidth: 1,
    borderColor: '#2490D4',
    paddingHorizontal: 15,
    marginLeft: 15
  },
  copyButtonText: {
    color: '#3598D7',
    fontWeight: 'bold'
  },
  transferPrice: {
    color: '#1C8CD2',
    fontSize: 28,
    fontWeight: 'bold'
  },
  transferPrice3Digit: {
    color: '#136FC1',
    position: 'relative'
  },
  transferValueContentBottom: {
    backgroundColor: '#1C8CD2',
    borderBottomLeftRadius: 8,
    borderBottomRightRadius: 8,
    padding: 25
  },
  transferValueContentBottomText: {
    fontSize: 13,
    color: '#ffffff',
    textAlign: 'center'
  },
  noteWrapper: {
    paddingHorizontal: 20,
    paddingTop: 25,
    paddingBottom: 40
  },
  noteTitle: {
    color: '#898989',
    fontWeight: 'bold',
    fontSize: 17
  },
  listFont: {
    color: '#898989',
    fontSize: 15
  },
  listNumber: {
    width: 20,
    position: 'absolute',
    marginTop: 10
  },
  listText: {
    width: screenWidth - 60,
    position: 'relative',
    left: 20,
    marginTop: 10
  },
  buttonWrapper: {
    paddingVertical: 20,
    paddingHorizontal: 25,
    borderTopWidth: 1,
    borderColor: '#dfdfdf',
    width: '100%',
    backgroundColor: '#ffffff'
  },
  buttonStyle: {
    width: '100%',
    borderRadius: 5,
    justifyContent: 'center',
    elevation: 0
  },
  buttonLinear: {
    width: '100%',
    height: '100%',
    justifyContent: 'center',
    alignItems: 'center',
    paddingVertical: 25,
    borderTopRightRadius: 8,
    borderTopLeftRadius: 8,
    borderBottomRightRadius: 8,
    borderBottomLeftRadius: 8
  },
  buttonText: {
    color: '#ffffff',
    fontWeight: 'bold',
    fontSize: 14
  },
  popupWrapper: {
    backgroundColor: 'rgba(52, 52, 52, 0.8)',
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  popupContentWrapper: {
    backgroundColor: '#ffffff',
    borderRadius: 8,
    width: 300,
    alignItems: 'center'
  },
  popupContentHead: {
    paddingTop: 25,
    paddingBottom: 20
  },
  popupContentBody: {
    paddingBottom: 20
  },
  popupContentFoot: {
    padding: 20,
    borderColor: '#dfdfdf',
    borderTopWidth: 1
  },
  popupTitle: {
    color: '#565656',
    fontSize: responsiveFontSize(2.2),
    fontWeight: 'bold'
  },
  popupContent: {
    color: '#565656',
    fontSize: responsiveFontSize(1.8)
  },
  removeBorderBottom: {
    borderBottomWidth: 0
  },
  imageTopUp: {
    width: responsiveWidth(14),
    height: responsiveHeight(7.8),
    alignSelf: 'center',
    marginBottom: responsiveHeight(1.7)
  },
  // Astaga
  timerContainer: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  container: {
    alignItems: 'center',
    backgroundColor: '#FF6D2E',
    width: responsiveWidth(100)
  },
  textTime: {
    color: '#FFF',
    alignSelf: 'center',
    textAlign: 'center'
  }
})

export default C_KonfirmasiTopUpViaATM