-- CODE language-jsx --
import React from 'react';
import Images from '../config/Images';
import { Button, ScreenContainer, withTheme } from '@draftbit/ui';
import {
 Image,
 KeyboardAvoidingView,
 ScrollView,
 StyleSheet,
 Text,
 TextInput,
 View,
} from 'react-native';
const REPLACE_SCREEN_NAME = props => {
 const [creditcardnumber, setCreditcardnumber] = React.useState(undefined);
 const [expirymonth, setExpirymonth] = React.useState(undefined);
 const [expiryyear, setExpiryyear] = React.useState(undefined);
 const [cvc, setCvc] = React.useState(undefined);
 const { theme } = props;
 return (
   <ScreenContainer hasSafeArea={true} scrollable={true}>
     <KeyboardAvoidingView
       style={styles.keyboardAvoidingViewEp}
       behavior=""position""
       enabled={true}
       keyboardVerticalOffset={44}
     >
       <ScrollView
         contentContainerStyle={styles.scrollView4R}
         showsHorizontalScrollIndicator={false}
         bounces={true}
         showsVerticalScrollIndicator={true}
       >
         <View style={styles.viewFS}>
           <Text
             style={StyleSheet.flatten([
               styles.textKo,
               theme.typography.headline4,
               { color: theme.colors.strong },
             ])}
           >
             Add Card
           </Text>
           <Text
             style={StyleSheet.flatten([
               styles.textVq,
               theme.typography.subtitle1,
               { color: theme.colors.medium },
             ])}
           >
             Enter your credit details.
           </Text>
           <Image
             style={StyleSheet.flatten([
               styles.imageCk,
               {
                 backgroundColor: theme.colors.background,
                 borderColor: theme.colors.divider,
                 borderRadius: theme.borderRadius.global,
               },
             ])}
             resizeMode=""contain""
             source={Images.CreditCardImagePlaceholder}
           />
         </View>
         <View
           style={styles.viewMw}
           importantForAccessibility=""auto""
           hitSlop={{}}
           pointerEvents=""auto""
           accessible={true}
         >
           <View
             importantForAccessibility=""auto""
             hitSlop={{}}
             pointerEvents=""auto""
             accessible={true}
           >
             <Text
               style={StyleSheet.flatten([
                 styles.textKk,
                 theme.typography.caption,
                 { color: theme.colors.strong },
               ])}
               allowFontScaling={true}
               accessible={true}
               textBreakStrategy=""highQuality""
               ellipsizeMode=""tail""
             >
               Card Number
             </Text>
             <View
               style={styles.viewDv}
               importantForAccessibility=""auto""
               accessible={true}
               pointerEvents=""auto""
               hitSlop={{}}
             >
               <TextInput
                 style={StyleSheet.flatten([
                   styles.textInputFa,
                   {
                     backgroundColor: theme.colors.background,
                     borderColor: theme.colors.divider,
                     borderRadius: theme.borderRadius.global,
                     color: theme.colors.strong,
                   },
                 ])}
                 keyboardType=""numeric""
                 autoCapitalize=""none""
                 allowFontScaling={true}
                 onChangeText={creditcardnumber =>
                   setCreditcardnumber(creditcardnumber)
                 }
                 value={creditcardnumber}
                 placeholderTextColor={theme.colors.medium}
                 placeholder=""4242""
                 clearButtonMode=""while-editing""
                 enablesReturnKeyAutomatically={true}
                 spellcheck={true}
                 returnKeyType=""next""
                 textContentType=""creditcardnumber""
               />
             </View>
           </View>
           <View
             style={styles.viewUz}
             hitSlop={{}}
             accessible={true}
             importantForAccessibility=""auto""
             pointerEvents=""auto""
           >
             <View
               hitSlop={{}}
               pointerEvents=""auto""
               importantForAccessibility=""auto""
               accessible={true}
             >
               <Text
                 style={StyleSheet.flatten([
                   styles.textGi,
                   theme.typography.caption,
                   { color: theme.colors.strong },
                 ])}
                 allowFontScaling={true}
                 textBreakStrategy=""highQuality""
                 ellipsizeMode=""tail""
                 accessible={true}
               >
                 Expiry Month
               </Text>
               <View
                 style={styles.viewMy}
                 importantForAccessibility=""auto""
                 hitSlop={{}}
                 accessible={true}
                 pointerEvents=""auto""
               >
                 <TextInput
                   style={StyleSheet.flatten([
                     styles.textInput49,
                     {
                       color: theme.colors.strong,
                       backgroundColor: theme.colors.background,
                       borderColor: theme.colors.divider,
                       borderRadius: theme.borderRadius.global,
                     },
                   ])}
                   value={expirymonth}
                   onChangeText={expirymonth => setExpirymonth(expirymonth)}
                   spellcheck={true}
                   allowFontScaling={true}
                   keyboardType=""numeric""
                   placeholderTextColor={theme.colors.medium}
                   enablesReturnKeyAutomatically={true}
                   placeholder=""MM""
                   autoCapitalize=""none""
                   returnKeyType=""next""
                   textContentType=""none""
                   maxLength={2}
                 />
               </View>
             </View>
             <View
               style={styles.viewQT}
               importantForAccessibility=""auto""
               pointerEvents=""auto""
               accessible={true}
               hitSlop={{}}
             >
               <Text
                 style={StyleSheet.flatten([
                   styles.textJM,
                   theme.typography.caption,
                   { color: theme.colors.strong },
                 ])}
                 accessible={true}
                 ellipsizeMode=""tail""
                 textBreakStrategy=""highQuality""
                 allowFontScaling={true}
               >
                 Expiry Year
               </Text>
               <View
                 style={styles.viewHp}
                 importantForAccessibility=""auto""
                 accessible={true}
                 pointerEvents=""auto""
                 hitSlop={{}}
               >
                 <TextInput
                   style={StyleSheet.flatten([
                     styles.textInputUi,
                     {
                       color: theme.colors.strong,
                       backgroundColor: theme.colors.background,
                       borderColor: theme.colors.divider,
                       borderRadius: theme.borderRadius.global,
                     },
                   ])}
                   allowFontScaling={true}
                   autoCapitalize=""none""
                   textContentType=""none""
                   spellcheck={true}
                   keyboardType=""numeric""
                   enablesReturnKeyAutomatically={true}
                   placeholder=""YY""
                   value={expiryyear}
                   placeholderTextColor={theme.colors.medium}
                   returnKeyType=""next""
                   onChangeText={expiryyear => setExpiryyear(expiryyear)}
                   maxLength={2}
                 />
               </View>
             </View>
             <View
               importantForAccessibility=""auto""
               pointerEvents=""auto""
               hitSlop={{}}
               accessible={true}
             >
               <Text
                 style={StyleSheet.flatten([
                   styles.textH5,
                   theme.typography.caption,
                   { color: theme.colors.strong },
                 ])}
                 accessible={true}
                 textBreakStrategy=""highQuality""
                 allowFontScaling={true}
                 ellipsizeMode=""tail""
               >
                 CVC
               </Text>
               <View
                 style={styles.viewBh}
                 accessible={true}
                 importantForAccessibility=""auto""
                 pointerEvents=""auto""
                 hitSlop={{}}
               >
                 <TextInput
                   style={StyleSheet.flatten([
                     styles.textInputF7,
                     {
                       borderColor: theme.colors.divider,
                       borderRadius: theme.borderRadius.global,
                       color: theme.colors.strong,
                       backgroundColor: theme.colors.background,
                     },
                   ])}
                   keyboardType=""numeric""
                   placeholderTextColor={theme.colors.medium}
                   textContentType=""none""
                   enablesReturnKeyAutomatically={true}
                   returnKeyType=""done""
                   autoCapitalize=""none""
                   onChangeText={cvc => setCvc(cvc)}
                   allowFontScaling={true}
                   spellcheck={true}
                   placeholder=""CVC""
                   maxLength={3}
                   value={cvc}
                 />
               </View>
             </View>
           </View>
         </View>
       </ScrollView>
       <View
         style={styles.viewCe}
         hitSlop={{}}
         importantForAccessibility=""auto""
         pointerEvents=""auto""
         accessible={true}
       >
         <Button
           style={StyleSheet.flatten([
             styles.buttonNM,
             { borderRadius: theme.borderRadius.global },
           ])}
           type=""solid""
         >
           Add to Cart
         </Button>
       </View>
     </KeyboardAvoidingView>
   </ScreenContainer>
 );
};
const styles = StyleSheet.create({
 textKk: {
   textTransform: 'uppercase',
 },
 textGi: {
   textTransform: 'uppercase',
 },
 textJM: {
   textTransform: 'uppercase',
 },
 textH5: {
   textTransform: 'uppercase',
 },
 scrollView4R: {
   flexGrow: 1,
 },
 buttonNM: {
   height: 54,
   justifyContent: 'center',
   alignItems: 'center',
 },
 keyboardAvoidingViewEp: {
   flexGrow: 1,
   justifyContent: 'space-around',
 },
 textKo: {
   marginBottom: 6,
 },
 viewFS: {
   paddingRight: 32,
   paddingLeft: 32,
   paddingTop: 44,
   paddingBottom: 34,
 },
 textInputFa: {
   height: 54,
   borderTopWidth: 1,
   borderBottomWidth: 1,
   borderLeftWidth: 1,
   borderRightWidth: 1,
   paddingLeft: 14,
   paddingRight: 14,
 },
 textInput49: {
   borderTopWidth: 1,
   borderBottomWidth: 1,
   borderLeftWidth: 1,
   borderRightWidth: 1,
   paddingLeft: 14,
   paddingRight: 14,
   height: 54,
   maxWidth: 90,
   flexDirection: 'row',
   alignItems: 'center',
   textAlign: 'left',
 },
 textInputUi: {
   borderLeftWidth: 1,
   borderRightWidth: 1,
   paddingLeft: 14,
   paddingRight: 14,
   height: 54,
   maxWidth: 90,
   flexDirection: 'row',
   alignItems: 'center',
   textAlign: 'left',
   borderTopWidth: 1,
   borderBottomWidth: 1,
 },
 textInputF7: {
   flexDirection: 'row',
   alignItems: 'center',
   textAlign: 'left',
   borderTopWidth: 1,
   borderBottomWidth: 1,
   borderLeftWidth: 1,
   borderRightWidth: 1,
   paddingLeft: 14,
   paddingRight: 14,
   height: 54,
   maxWidth: 90,
 },
 viewDv: {
   paddingTop: 12,
   marginBottom: 12,
   paddingBottom: 12,
 },
 viewMy: {
   paddingBottom: 12,
   paddingTop: 12,
   marginBottom: 12,
 },
 viewHp: {
   paddingBottom: 12,
   paddingTop: 12,
   marginBottom: 12,
 },
 viewQT: {
   marginLeft: 24,
   marginRight: 24,
 },
 viewBh: {
   paddingBottom: 12,
   paddingTop: 12,
   marginBottom: 12,
 },
 viewUz: {
   width: '100%',
   flexDirection: 'row',
   marginTop: 8,
 },
 viewMw: {
   paddingBottom: 14,
   paddingRight: 32,
   paddingLeft: 32,
 },
 viewCe: {
   paddingLeft: 32,
   paddingRight: 32,
   paddingBottom: 34,
   paddingTop: 14,
 },
 textVq: {
   textAlign: 'left',
 },
 imageCk: {
   borderRightWidth: 1,
   marginBottom: 24,
   height: 190,
   width: '100%',
   borderBottomWidth: 1,
   borderTopWidth: 1,
   borderLeftWidth: 1,
   marginTop: 34,
 },
});
export default withTheme(REPLACE_SCREEN_NAME);