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 {
      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 {
    render() {
        return (
            <Animatable.View animation="bounceIn" style={styles.container}>
              <ScrollView showsVerticalScrollIndicator={false}>
                <SettingsInput label="Full Name" storageKey="key1" />
                <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" />
                <SettingsInput label="Expiry" storageKey="key10" />
                <SettingsInput label="CVV" storageKey="key11" />
                <CreditCard
                imageFront={require("../assets/card-front.png")}
                imageBack={require("../assets/card-back.png")}
                number="1111111111111111"
                name={this.state.key1}
                expiry="04/20"
                cvc="069"
                onChangeText={(value) => this.saveKey()}
                 />
              </ScrollView>
            </Animatable.View>
        )
    }
}

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