import * as React from 'react';
import { connect } from "react-redux";
import { 
  TouchableOpacity, 
  TextInput, 
  View, 
  Text, 
  Image, 
  Alert,
  Platform
} from 'react-native';
import { 
  FormControl, 
  Input, 
  KeyboardAvoidingView, 
  ScrollView, 
  Stack
} from 'native-base';
import CustomHeader from '../../../components/header.js';
import Theme from '../../../components/theme.style.js';
import Icon from '../../../components/icons.js';
import REQUEST from '../../../components/api/';
import CustomSafeArea from '../../../components/safeArea.component.js';

const CustomInput = (props) => {

  const titlecolor = props.focused ? Theme.colors.accent : Theme.colors.darkGray
  const bordercolor = props.error ? Theme.colors.primary : (props.focused ? Theme.colors.accent : 'gray')
  const borderwidth = props.error ? 1.6 : (props.focused ? 1.5 : 1)

  const style = {
    container: {flexDirection: 'row', width: '90%', marginLeft: '5%', marginTop: props.top || 30, alignItems: 'center', opacity: props.shown ? 1 : 0},
    title: {fontSize: 12, color: titlecolor, marginTop: -25, marginBottom: 15},
    input: {width: '100%', fontSize: 16, padding: 0, borderBottomColor: bordercolor, borderBottomWidth: borderwidth},
    error: {fontSize: 12, color: Theme.colors.primary, marginTop: 5, marginBottom: 15}
  }

  return (
    <View style={style.container}> 
      <View style={{flex: 1}}>
        {props.focused ? 
          <Text style={style.title}>
            {props.title}
          </Text> : null}
        <TextInput
          keyboardType={props.keyboardType || null}
          maxLength={props.maxlength || null} 
          placeholder={props.placeholder || props.title || null}
          value={props.value || null}
          onFocus={props.onFocus || null}
          onChangeText={props.onChangeText || null}
          style={style.input} 
        />
        {props.error ? <Text style={style.error}>{props.errorMessage}</Text> : null }
      </View>
    </View>)
}

class ApplyCardDetails extends React.Component {

  constructor(props) {
    super(props)
    this.card = props.route.params || {}

    this.keyboardOpenListener = null;
    this.keyboardCloseListener = null;
  }

  state = {
    info: null,
    focus: false,
    cardid: null,
    canProceed: false,
    valid: false
  }

  componentDidMount() {
    this.init()
  }

  componentWillUnmount() {
  }

  init = async () => {
    if(this.card.id_number == 0 || this.handleShowForm() == 0){
      this.setState({ canProceed: true, valid: true })
    }
    await REQUEST("get_card_prompt_info", "get", {}, {}, {}, 
      async (res) => {
        if(res.status == 1) {
          console.log("the data: " + JSON.stringify(res.data))
          this.setState({ info: res.data })
        } else {
          console.log(res.message, res.data)
        }
      }, function(error){  
        console.log(error)
    })
  }

  proceed = (method) => {
    this.props.navigation.navigate("ApplyForm", {
      method: method,
      card_uuid: this.card.cardtype_uuid,
      id_number: this.state.cardid ? this.state.cardid : ""
    })
  }

  onNext = () => {
    if(this.state.valid){
      if(this.card.id_number == 0 || this.handleShowForm() == 0){
        this.proceed(0)
      }else{
        REQUEST("signup_id_number", "post", {}, {}, {
          cardtype_uuid: this.card.cardtype_uuid,
          id_number: this.state.cardid
        }, (res) => {
          console.log(res)
          if(res.status == 0) Alert.alert("Error", res.message)
          else if(res.status == 1) this.proceed(1)
        }, (error) => {
          console.log(error)
        })
      }
    }

  }

  handleShowForm = () => {
    return this.card.id_number && this.card.id_number == 1 ? this.card.code == 'PUVCARD' ? 0 : 1 : 0 // returns  0 - 1 if ID NUMBER IS REQUIRED
  }

  render() {
    return (
      <CustomSafeArea>
        <CustomHeader title="" menu={false} back={true} backscreen="ApplySelectCard" navigation={this.props.navigation} />
        <KeyboardAvoidingView
          style={{flex: 1}}
          behavior='padding'
          keyboardVerticalOffset={Platform.OS === 'ios' ? 50 : 70}
        >
          <ScrollView contentContainerStyle={Platform.OS === "android" ? {flex: 1} : {height: Theme.screen.h * .85}}>
            <View style={{flex: 1, justifyContent: 'flex-start', alignItems: 'flex-start', padding: 20}}>
              <View style={{padding: 10, width: '100%'}}>
                <Image source={{uri: this.card.image}} style={{width: '100%', height: Theme.screen.h * .28, borderRadius: 10}} />
              </View>
              <Text style={{padding: 15, paddingTop: 5, paddingLeft: 0, fontSize: 16, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.black, fontWeight: 'bold'}}>
                {this.card.name}
              </Text>
              <Text style={{fontSize: 13.5, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary, width: '100%'}}>
                {this.card.description}
              </Text>
      
              <View style={{flex: 1, width: '100%'}}>
                <View style={{width: '100%', opacity: this.handleShowForm()}}>
                  <View style={{alignItems: 'center', alignSelf: 'center', marginTop: 20}}>
                    <Text style={{fontSize: 20, fontWeight: 'bold', textAlign: 'center', padding: 10, color: 'black', paddingBottom: 20}}>Enter ID Number</Text>
                  </View>
                </View>
        
                <FormControl style={{width: '100%', opacity: this.handleShowForm()}}>
                  <Stack>
                    <FormControl.Label style={{ color: this.props.app_theme?.theme.colors.text }}>ID Number</FormControl.Label>
                    <Input 
                      style={{ color: this.props.app_theme?.theme.colors.text }}
                      placeholder="ID Number"
                      value={this.state.cardid || ""}
                      onChangeText={(value) => {
                        this.setState({ cardid: value })
                        if(value != "") this.setState({ valid: true })
                        else this.setState({ valid: false })
                      }} 
                    />
                  </Stack>
                </FormControl>
                <View style={{flex: 1, justifyContent: 'flex-end'}}>
                {
                  this.state.canProceed ?
                    <TouchableOpacity onPress={() => this.onNext()} style={{backgroundColor: !this.handleShowForm() ? Theme.colors.primary : this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.border : Theme.colors.primary, padding: 15, marginTop: 20, width: '100%', borderRadius: 10, elevation: 3}}>
                      <Text style={{textAlign: 'center', color: "#fff", fontSize: 16}}>Next</Text>
                    </TouchableOpacity> : 
                    <TouchableOpacity disabled={!this.state.valid} onPress={() => this.onNext()} style={{backgroundColor: this.state.valid ? Theme.colors.primary : this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.border : Theme.colors.primary + "15", padding: 15, marginTop: 20, width: '100%', borderRadius: 10, elevation: this.state.valid ? 3 : 0}}>
                      <Text style={{textAlign: 'center', color: "#fff", fontSize: 16}}>Next</Text>
                    </TouchableOpacity>
                }
                </View>
              </View>
            </View>
          </ScrollView>
        </KeyboardAvoidingView>
      </CustomSafeArea>
    );
  }
}

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

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