import React, { PureComponent } from 'react'
import { View } from 'react-native'
import { connect } from 'react-redux'
import { shape, number } from 'prop-types'
import {
  Header,
  Balance,
  Button,
  SimpleUserCard,
  SelectAmount,
  SelectAmountCell,
  TopUpCell
} from '../../../components/common'
import { navigationType } from '../../../prop-types'
import { H } from '../../../config/constants'
import {
  WHITE,
  WHITE_SMOKE
} from '../../../styles/colors'

import { goBack, onScreen, _onChangeState } from '../../../config/helpers'

class TopUpBalance extends PureComponent {
  state = {
    onCheck: true,
    disable: false,
    one: false,
    two: false,
    three: false,
    four: false,
    five: false,
    six: false
  }

  _onChangeText = () => {}

  render() {
    const { disable, onCheck, one, two, three, four, five, six } = this.state
    const { main, credit } = this.props.user.data.account
    return (
      <View>
        <Header
          first="Top Up Balance"
          iconLeft="arrow-left"
          colorLeft={WHITE}
          onPressLeft={this._onGoBack()}
        />
        <Balance first="Your Balance" amount={main + credit} />
        <View style={{ height: H - 105, backgroundColor: WHITE_SMOKE }}>
          <SimpleUserCard
            first={'081318866101'}
            second={'Richie Maryadi'}
          />
          <SelectAmount
            value={''}
            onChangeText={this._onChangeText}
            onCheck={onCheck}
          >
            <SelectAmountCell>
              <TopUpCell
                amount={50000}
                onCheck={one}
                onPress={this._onChangeState({ ...this.state, one: true, two: false, three: false, four: false, five: false, six: false })}
              />
              <TopUpCell
                amount={100000}
                onCheck={two}
                left={10}
                onPress={this._onChangeState({ ...this.state, one: false, two: true, three: false, four: false, five: false, six: false })}
              />
              <TopUpCell
                amount={200000}
                onCheck={three}
                left={10}
                onPress={this._onChangeState({ ...this.state, one: false, two: false, three: true, four: false, five: false, six: false })}
              />
            </SelectAmountCell>
            <SelectAmountCell>
              <TopUpCell
                amount={300000}
                onCheck={four}
                onPress={this._onChangeState({ ...this.state, one: false, two: false, three: false, four: true, five: false, six: false })}
              />
              <TopUpCell
                amount={500000}
                onCheck={five}
                left={10}
                onPress={this._onChangeState({ ...this.state, one: false, two: false, three: false, four: false, five: true, six: false })}
              />
              <TopUpCell
                amount={1000000}
                onCheck={six}
                left={10}
                onPress={this._onChangeState({ ...this.state, one: false, two: false, three: false, four: false, five: false, six: true })}
              />
            </SelectAmountCell>
          </SelectAmount>
          <View style={{ position: 'absolute', bottom: 0, width: '100%' }}>
            <Button disable={disable} first="Next" />
          </View>
        </View>
      </View>
    )
  }
}

TopUpBalance.propTypes = {
  navigation: navigationType.isRequired,
  user: shape({
    data: shape({
      account: shape({
        main: number,
        credit: number
      })
    })
  })
}

const mapStateToProps = ({ user }) => ({
  user
})

export default connect(mapStateToProps, null)(TopUpBalance)