import * as React from 'react';
import { 
  TouchableOpacity, 
  Platform, 
  View, 
  Text, 
  Image, 
  Alert, 
  Modal 
} from 'react-native';
import { 
  Container, 
  FormControl,
  Stack, 
  Input 
} from 'native-base';
import { connect } from "react-redux";
import CustomHeader from '../../components/header.js';
import Assets from '../../components/assets.manager.js';
import Theme from '../../components/theme.style.js';
import Elements from '../../components/elements.js';
import IconX from '../../components/icons.js';
import REQUEST from '../../components/api/';
import CustomSafeArea from '../../components/safeArea.component.js';

const styles = {
  centeredView: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: '#00000090',
    padding: 30
  },
  bottomView: {
    flex: 1,
    justifyContent: "flex-end",
    alignItems: "center",
    backgroundColor: '#00000090',
    padding: 0
  },
  modalView: {
    backgroundColor: '#fff',
    padding: 20
  },
  modalTitle: {
    padding: 5,
    fontSize: 18,
    fontWeight: 'bold'
  },
  modalText: {
    padding: 5,
    fontSize: 16,
    color: 'gray',
    marginTop: 10
  }
}

class ApplyCardDetails extends React.Component {

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

  state = {
    loading: false,
    modalvisible: false,
    pin: null,
    valid: false
  }

  componentDidMount() {

  }

  componentWillUnmount() {

  }

  proceed = () => {
    this.props.navigation.navigate("EnrollForm", {
      card_number: this.card.card_number,
      pin: this.state.pin,
      transactionType: this.props.route.params?.transactionType
    })
  }

  onNext = async () => {
    this.setState({ loading: true })
    let body = {
      card_number: this.card.card_number,
      pin: this.state.pin
    }
    await REQUEST("send_card_pin", "post", {}, {}, body, (res) => {
      this.setState({ loading: false })
      if(res.status == 0){
        Platform.OS == 'ios' ? setTimeout(() => {
          Alert.alert("Error", res.message)
        }, 300) : Alert.alert("Error", res.message)
      } else {
        this.proceed()
      }
    }, (error) => {
      this.setState({ loading: false })
      Platform.OS == 'ios' ? setTimeout(() => {
        Alert.alert("Error", error.message)
      }, 300) : Alert.alert("Error", error.message)
    })
  }

  render() {
    return (
      <CustomSafeArea>
        <Elements.loader visible={this.state.loading} />
        <CustomHeader title="" menu={false} back={true} backscreen="EnrollActivate" navigation={this.props.navigation} />      
        <Container style={{flex: 1, padding: 30}}>
          <View style={{flex: 0, justifyContent: 'center', alignItems: 'center', marginTop: '15%'}}>
            <Text style={{fontFamily: "Arial", fontSize: 22, fontWeight: "bold", marginBottom: 15, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.black}}>Enter Your Pin</Text>
            <Text style={{fontFamily: "Arial", fontSize: 15, textAlign: 'center', width: '80%', color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.black}}>Please see the PIN at the back of your card&nbsp;             
              <IconX.AntDesign name="infocirlce" size={15} color="gray" onPress={() => this.setState({ modalvisible: true })} />
            </Text>
            
          </View>
          <FormControl style={{marginTop: '20%', marginBottom: '5%'}}>
            <Stack floatingLabel>
              <FormControl.Label style={{fontSize: 15, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.black}}>PIN Code</FormControl.Label>
              <Input style={{ color: this.props.app_theme?.theme.colors.text }} keyboardType="number-pad" maxLength={8} onChangeText={(val) => this.setState({ pin: val, valid: val.length == 8 ? true : false })} />
            </Stack>
          </FormControl>
          <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, borderRadius: 5}}>
            <Text style={{textAlign: 'center', color: "#fff", fontSize: 18, padding: 15}}>Submit</Text>
          </TouchableOpacity>
          <Modal
            animationType="none"
            transparent={true}
            visible={this.state.modalvisible}>
            <TouchableOpacity activeOpacity={1} onPress={() => this.setState({ modalvisible: false })} style={{...styles.centeredView, borderRadius: 12}}>
              <TouchableOpacity activeOpacity={1} style={{...styles.modalView, backgroundColor: '00000090', padding: 0, borderRadius: 12}}>
                <Image source={Assets.guidecard} style={{width: Theme.screen.w - 40, height: Theme.screen.h / 3, resizeMode: 'stretch', borderRadius: 12}} />
              </TouchableOpacity>
            </TouchableOpacity>
          </Modal>
        </Container>      
      </CustomSafeArea>
    );
  }
}

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

export default connect(mapStateToProps, null)(ApplyCardDetails)

// export default function ApplyCardDetails(navigation) {

//   const card = navigation.route.params || {}
//   const [loading, setloading] = useState(false)
//   const [modalvisible, setmodalvisible] = useState(false)  
//   const [pin, setpin] = useState(null)
//   const [valid, setvalid] = useState(false)

//   const init = async () => {
//     console.log(card)
//   }

//   useEffect(() => {
//     init()
//   }, [])

//   const Proceed = () => {
//     navigation.navigation.navigate("EnrollForm", {
//       card_number: card.card_number,
//       pin: pin,
//       transactionType: navigation.route.params?.transactionType
//     })
//   }

//   const onNext = async () => {
//     setloading(true)
//     let body = {
//       card_number: card.card_number,
//       pin: pin
//     }
//     // alert(JSON.stringify(body))
//     await REQUEST("send_card_pin", "post", {}, {}, body, function(res){
//       console.log("RESULT", res)
//       setloading(false)
//       if(res.status == 0){
//         Platform.OS == 'ios' ? setTimeout(() => {
//           Alert.alert("Error", res.message)
//         }, 300) : Alert.alert("Error", res.message)
//       }else{
//         Proceed()
//       }
//     }, function(error){
//       console.log(error)
//       setloading(false)
//     })

//   }

//   return (
//     <SafeAreaView style={{flex: 1}}>
//       <Elements.loader visible={loading} />
//       <CustomHeader title="" menu={false} back={true} backscreen="EnrollActivate" navigation={navigation} />      
//       <Content style={{padding: 30}}>
//           <View style={{flex: 0, justifyContent: 'center', alignItems: 'center', marginTop: '15%'}}>
//             <Text style={{fontFamily: "Arial", fontSize: 22, fontWeight: "bold", marginBottom: 15}}>Enter Your Pin</Text>
//             <Text style={{fontFamily: "Arial", fontSize: 15, textAlign: 'center', width: '80%'}}>Please see the PIN at the back of your card&nbsp;             
//               <IconX.AntDesign name="infocirlce" size={15} color="gray" onPress={() => setmodalvisible(true)} />
//             </Text>
            
//           </View>
//           <Form style={{marginTop: '20%', marginBottom: '5%'}}>
//             <Item floatingLabel>
//               <Label style={{fontSize: 15}}>PIN Code</Label>
//               <Input keyboardType="number-pad" maxLength={8} onChangeText={(val) => setpin(val)} />
//             </Item>
//           </Form>
//           <TouchableOpacity onPress={() => onNext() } style={{backgroundColor: Theme.colors.primary, borderRadius: 5}}>
//             <Text style={{textAlign: 'center', color: "#fff", fontSize: 18, padding: 15}}>Next</Text>
//           </TouchableOpacity>
//     <Modal
//       animationType="none"
//       transparent={true}
//       visible={modalvisible}
//     >
//       <TouchableOpacity activeOpacity={1} onPress={() => setmodalvisible(false)} style={{...styles.centeredView, borderRadius: 12}}>
//         <TouchableOpacity activeOpacity={1} style={{...styles.modalView, backgroundColor: '00000090', padding: 0, borderRadius: 12}}>
//           <Image source={Assets.guidecard} style={{width: Theme.screen.w - 40, height: Theme.screen.h / 3, resizeMode: 'stretch', borderRadius: 12}} />
//         </TouchableOpacity>
//       </TouchableOpacity>
//     </Modal>
//       </Content>      
//     </SafeAreaView>
//   );
// }