import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  View,
  TouchableOpacity,
  Alert,
  SafeAreaView,
  Text,
  TextInput,
} from 'react-native';
import { inject, observer } from "mobx-react"
import { observable, makeObservable } from 'mobx'
var _ = require('lodash');
import Loading from '../../components/Loading';
import Icon from 'react-native-vector-icons/dist/Ionicons';
import Icon2 from 'react-native-vector-icons/dist/MaterialCommunityIcons';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
import CustomLoginButton from '../../components/customLoginButton';
import Toast, { DURATION } from 'react-native-easy-toast';
import { colors } from '../../assets/styles/colors-theme';
import Menu, {
  MenuProvider,
  MenuTrigger,
  MenuOptions,
  MenuOption,
  renderers,
} from 'react-native-popup-menu';
const { SlideInMenu } = renderers;
import {
  CreditCardInput,
  LiteCreditCardInput,
} from 'react-native-credit-card-input';
//component

// function
import { width, height } from '../../services/screen';
Icon.loadFont();

//const log = new Log()
const AddName = inject("appStore")(observer(class AddNmae extends React.Component {


  data = {
    last_name: '',
    first_name: '',
  };
  static navigationOptions = {
    drawerLabel: 'Account',
  };

  constructor(props) {
    super(props);
    this.store = props.appStore;
    makeObservable(this, {
      data: observable
    })
  }
  async componentWillMount() {
    this.data = {
      last_name: this.store.loginUserData.data.last_name,
      first_name: this.store.loginUserData.data.first_name,
    };
  }

  saveAction() {
    if (this.data.last_name != '') {
      if (this.data.first_name != '') {
        this.store.editName(this.data, this);
      } else {
        this.refs.toast.show(this.store.text.pleaseInputFirstName);
      }
    } else {
      this.refs.toast.show(this.store.text.pleaseInputLastName);
    }
  }

  render() {
    return (
      <MenuProvider
        style={{ flex: 1, backgroundColor: colors.bgc, alignItems: 'center' }}>
        <Loading loading={this.store.loading} />
        <View
          style={{
            height: 50,
            width: width,
            justifyContent: 'center',
            alignItems: 'center',
            backgroundColor: colors.mainColor,
          }}>
          <Text style={{ color: 'white', fontSize: 18 }}>{this.store.text.name}</Text>
        </View>
        <KeyboardAwareScrollView>
          <View style={{ flex: 1, alignItems: 'center' }}>
            <View style={{ marginTop: 20, width: width }}>
              <TouchableOpacity
                style={{
                  height: 60,
                  width: 60,
                  justifyContent: 'center',
                  alignItems: 'center',
                }}
                onPress={() => {
                  this.props.navigation.goBack();
                }}>
                <Icon
                  name="ios-arrow-back"
                  color={colors.mainColor}
                  size={40}
                />
              </TouchableOpacity>
            </View>

            <View style={styles.inputTextView}>
              <Text style={styles.inputTextTitleView}>
                {this.store.text.lastName + ' '}
              </Text>

              <View style={{ flexDirection: 'row', marginBottom: 5 }}>
                <View style={{ flex: 1 }}>
                  <TextInput
                    style={{
                      fontSize: 15,
                      color: 'black',
                      marginTop: 10,
                    }}
                    value={this.data.last_name}
                    onChangeText={text => (this.data.last_name = text)}
                  />
                </View>
              </View>
            </View>

            <View style={styles.inputTextView}>
              <Text style={styles.inputTextTitleView}>
                {this.store.text.firstName + ' '}
              </Text>

              <View style={{ flexDirection: 'row', marginBottom: 5 }}>
                <View style={{ flex: 1 }}>
                  <TextInput
                    style={{
                      fontSize: 15,
                      color: 'black',
                      marginTop: 10,
                    }}
                    value={this.data.first_name}
                    onChangeText={text => (this.data.first_name = text)}
                  />
                </View>
              </View>
            </View>
            <View style={{ marginTop: 30 }}>
              <CustomLoginButton
                title={this.store.text.save}
                onPress={() => {
                  this.saveAction();
                }}
              />
            </View>
          </View>
        </KeyboardAwareScrollView>
        <Toast
          ref="toast"
          style={{ backgroundColor: colors.mainColor }}
          position="bottom"
          positionValue={100}
          fadeInDuration={750}
          fadeOutDuration={2000}
          opacity={0.8}
          textStyle={{ color: 'white' }}
        />
      </MenuProvider>
    );
  }
}))

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: 'white',
  },

  button: {
    marginTop: 20,
    width: width,
    height: 60,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: colors.statusBarColor,
  },
  inputTextView: {
    width: width - 40,
    marginTop: 20,
    borderBottomWidth: 1,
    borderBottomColor: colors.line2Color,
    height: 50,
  },
  inputTextTitleView: {
    fontSize: 14,
    color: colors.line2Color,
  },
  title: {
    fontSize: 17,
    marginTop: 20,
  },
  subtitle: {
    fontSize: 14,
  },
  buttonText: {
    color: '#fff',
  },
  picker: {
    fontSize: 20,
    paddingVertical: 12,
    paddingHorizontal: 10,
    borderWidth: 1,
    borderColor: 'black',
    borderRadius: 4,
    color: 'black',
    paddingRight: 30, // to ensure the text is never behind the icon
  },
  textView: {
    color: colors.mainColor,

    fontSize: 20,
    fontWeight: 'bold',
  },
});
const pickerSelectStyles = StyleSheet.create({
  inputIOS: {
    fontSize: 16,
    paddingVertical: 12,
    paddingHorizontal: 10,
    borderWidth: 1,
    borderColor: 'gray',
    borderRadius: 4,
    color: 'black',
    paddingRight: 30, // to ensure the text is never behind the icon
  },
  inputAndroid: {
    fontSize: 16,
    paddingHorizontal: 10,
    paddingVertical: 8,
    borderWidth: 0.5,
    borderColor: 'black',
    borderRadius: 8,
    color: 'black',
    paddingRight: 30, // to ensure the text is never behind the icon
  },
});

export default AddName
