import React from 'react'
import {
	View, 
	Text, 
	TouchableOpacity
} from 'react-native';
import { 
	FormControl, 
	Input, 
	Stack 
} from 'native-base';
import { LiteCreditCardInput } from "react-native-credit-card-input";
import { connect } from "react-redux";
import moment from 'moment';
import Theme from '../theme.style';
import DB from '../storage/index';

class RegisterCardFrom extends React.Component {

	constructor(props) {
		super(props)
	}

	state = {
		name: '',
		cardnumber: '',
		cvv: '',
		expmonth: '',
		expyear: '',
	}

	componentDidMount() {
		this.init()
	}

	componentWillUnmount() {

	}

	init = async () => {
		let user = await DB.profile()
		this.setState({ name: `${user.data.firstname} ${user.data.middlename} ${user.data.lastname}` })
	}

	send = () => {
		this.props.onSend(this.state ? this.state : null)
	}

	_onChange = form => {
		let {cvc, expiry, number} = form.values;
		this.setState({ cardnumber: number.replace(/\s/g, ''), cvv: cvc, expmonth: expiry.split('/')[0], expyear: moment(expiry.split('/')[1], 'YY').format('YYYY') })
	};

	render() {
		return (
			<View style={{backgroundColor: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.border : Theme.colors.white, alignItems: 'center', justifyContent: 'center', paddingVertical: 30}}>
				<Text style={{fontSize: 20, alignSelf: 'center', fontFamily: 'Arial', color: Theme.colors.primary}}>Enroll Your Payment Card</Text>
				<FormControl style={{width: '90%', marginVertical: 20}}>
					<LiteCreditCardInput 
						inputStyle={{ color: this.props.app_theme?.theme.colors.text}}
						placeholders={{
							number: "Enter card number here", 
							expiry: "MM/YY", 
							cvc: "CVC"
						}} onChange={this._onChange}/>
					<Stack>
						<FormControl.Label style={{ color: this.props.app_theme?.theme.colors.text }}>Full Name</FormControl.Label>
						<Input style={{ color: this.props.app_theme?.theme.colors.text }} placeholder={this.state.name} value={this.state.name} onChangeText={(value) => this.setState({ name: value })} />
					</Stack>
				</FormControl>
				<View style={{width: '90%', height: 50, borderRadius: 5, borderColor: 'black', borderWidth: 0.1, backgroundColor: ((!this.state.cardnumber || !this.state.cvv || !this.state.expmonth || !this.state.expyear) && this.props.app_theme?.theme.dark) ? Theme.colors.darkerGray : !this.state.cardnumber || !this.state.cvv || !this.state.expmonth || !this.state.expyear ? Theme.colors.darkerWhite : Theme.colors.primary}}>
					<TouchableOpacity disabled={!this.state.cardnumber || !this.state.cvv || !this.state.expmonth || !this.state.expyear} onPress={() => this.send()} style={{padding: 15}}>
						<Text style={{textAlign:'center', color: "#fff"}}>Proceed</Text>
					</TouchableOpacity>
				</View>
			</View>
		)
	}
}

const mapStateToProps = (state) => {
	return {
	  app_theme: state.appThemeReducer.theme
	}
}

export default connect(mapStateToProps, null)(RegisterCardFrom);