import React from "react";
import { ScrollView, StyleSheet, AsyncStorage } from "react-native";
import { Madoka } from "react-native-textinput-effects";
import CreditCard from "react-native-credit-card";
import * as Animatable from 'react-native-animatable';

export class SettingsInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        myKey: undefined
    }
  }

  componentDidMount() {
      this.getKey()
  }

  async getKey() {
    try {
      const value = await AsyncStorage.getItem(this.props.storageKey);
      this.setState({myKey: value});
    } catch (error) {
      console.log("Error retrieving data" + error);
    }
  }

  async saveKey(value) {
    try {
        this.props.onChange && this.props.onChange(value)
        await AsyncStorage.setItem(this.props.storageKey, value)
    } catch (error) {
      console.log("Error saving data" + error);
    }
  }

  render() {
    return (
        <Madoka
          label={this.props.label}
          borderColor={"#fff"}
          labelStyle={{ color: "#fff" }}
          inputStyle={{ color: "#fff" }}
          value={this.state.myKey}
          onChangeText={(value) => this.saveKey(value)}
        />
    )
  }
}

export default class Settings extends React.Component {
    state = {
        fullName: '',
        number: '',
        expiry: '',
        cvc: ''
    }

    onChange = (name, value) => {
        this.setState({
            [name]: value
        })
    }

    render() {
        return (
            <Animatable.View animation="bounceIn" style={styles.container}>
              <ScrollView showsVerticalScrollIndicator={false}>
                <SettingsInput label="Full Name" storageKey="key1" onChange={(val) => this.onChange('fullName', val)} />
                <SettingsInput label="Email" storageKey="key2" />
                <SettingsInput label="Tel" storageKey="key3" />
                <SettingsInput label="Address" storageKey="key4" />
                <SettingsInput label="City" storageKey="key5" />
                <SettingsInput label="Postcode" storageKey="key6" />
                <SettingsInput label="Country" storageKey="key7" />
                <SettingsInput label="Card Type" storageKey="key8" />
                <SettingsInput label="Number" storageKey="key9" onChange={(val) => this.onChange('number', val)} />
                <SettingsInput label="Expiry" storageKey="key10" onChange={(val) => this.onChange('expiry', val)} />
                <SettingsInput label="CVV" storageKey="key11" onChange={(val) => this.onChange('cvc', val)} />
                <CreditCard
                imageFront={require("../assets/card-front.png")}
                imageBack={require("../assets/card-back.png")}
                number={this.state.number}
                name={this.state.fullName}
                expiry={this.state.expiry}
                cvc={this.state.cvc}
                onChangeText={(value) => this.saveKey()}
                 />
              </ScrollView>
            </Animatable.View>
        )
    }
}

const styles = StyleSheet.create({
  container: {
    margin: 35,
    justifyContent: "space-around",
    alignItems: "center"
  }
});