/**
 * Project iLinkWorld
 * File AutreCarteM
 * Path screens/wallet/user
 * Created by BRICE ZELE
 * Date: 08/11/2021
 */
import React, {useEffect, useState, useRef} from 'react';
import {
    Alert,
    Dimensions,
    KeyboardAvoidingView,
    Platform,
    ScrollView,
    StyleSheet,
    TouchableOpacity,
    View,
} from 'react-native';
import {connect, useDispatch, useSelector} from 'react-redux';
import {useFormik} from 'formik';
import * as Yup from 'yup';
import * as Utils from '../../../utils/UtilsFunction'
import { optionenvoieautrewalletNanoSanteScreen} from '../../../utils/UtilsFunction'
import {Color} from "../../../config/Color";
import I18n from 'react-native-i18n';
import {Fumi} from 'react-native-textinput-effects';
import {ScreenComponent} from "../../../components/ScreenComponent";
import PasswordInput from '../../../components/PasswordInput';
import Button from "../../../components/Button";
import { LiteCreditCardInput } from "react-native-credit-card-input";
import FontAwesome from "react-native-vector-icons/FontAwesome";
import {
    fetchActivePaySubscription,
    fetchActivePaySubscriptionReset,
    fetchGetSubscriptionList,
    fetchGetSubscriptionListReset
} from "../../../redux/insurance/insurance.actions";
import {
    getActiveCountryAction,
    getActiveCountryByDialCodeAction,
    getActiveCountryByDialCodeReset,
    getActiveCountryReset,
    getPayCountryNetworkAction,
    getPayCountryNetworkReset
} from '../../../webservice/CountryApi';
import DropdownAlert from "react-native-dropdownalert";
import {readUser} from "../../../webservice/AuthApi";
import * as Animatable from 'react-native-animatable';
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
import {createStructuredSelector} from "reselect";
import {selectActivatePaySubscription, selectSubscriptionList} from "../../../redux/insurance/insurance.selector";
import {responsiveHeight, responsiveWidth} from 'react-native-responsive-dimensions';
import {Dropdown} from "react-native-material-dropdown-v2";
import {store} from "../../../redux/store";
import Text from "../../../components/Text";
import TextInput from "../../../components/TextInput";
import route from '../../../route.json';
import SelectAssurance from './selectAssurance';
let moment = require('moment-timezone');

const {width, height} = Dimensions.get('window');
const CIRCLE_SIZE = width * 0.5;


const AutreCarteM = ( {props,
                                           activatePaySubscription,
                                           fetchGetSubscriptionList,
                                           fetchActivePaySubscription,
                                           navigation,
                                       }) => {

    const [user, setUser] = useState(null);
    const [password, setPassword] = useState(null);
    const [subscriptions, setSubscriptions] = useState([]);
    const [subscription, setSubscription] = useState(null);
    const [creditCardInput, setCreditCardInput] = useState();
    const [displayCardError, setDisplayCardError] = useState(false);
    const [selectedCountry, setSelectedCountry] = useState(null);
    const [selectedValue, setSelectedValue] = useState(null);
    const [paysCarteSelect, setPaysCarteSelect] = useState(null);
    const [countryCustomer, setCountryCustomer] = useState([]); // Assurez-vous de mettre à jour ces données avec les données du backend


  
    const onValueChange = (value) => {
     // getPayCountryNetworkReset();
  
      const countrySelect = countryCustomer.filter((item, i) => item.name === value);
      console.log("countryCustomer", value);
      setSelectedValue(value);
      getPayCountryNetworkAction({
        id_wallet_user: wallet.id,  
        id_country: countrySelect.name
      });
  
      getActiveCountryAction();
    }
    const handleCountryChange = (itemValue) => {
        setPaysCarteSelect(itemValue); // Mettre à jour l'état avec le pays sélectionné
    };

    const handleSelectPays = (countryCustomer) => {
        console.log('egfehjgehjgrf: ', countryCustomer )
        countryCustomer.filter((element, i) => element.id === value);
        setCountryCustomer(countryCustomer);
   
      dispatch(fetchGetSubscriptionListReset());
      dispatch(fetchActivePaySubscriptionReset());
      //dispatch( getActiveCountryReset)
      //dispatch(getPayCountryNetworkAction)

    }

 
    const dispatch = useDispatch();
    
    let dropDownAlertRef: any = null;
    let codeCVVAnim: any = null;
    let paysDestinationAnim: any = null;
    let subscriptionRef = null;
    let amountPerMonthRef = null;
    const [wallet] = useState(store.getState().walletDetailReducer.result.response);
    const with_linked_card = true;
    useEffect(() => {
        readUser().then((user) => {
            setUser(user)
        });
        dispatch(fetchGetSubscriptionListReset());
        dispatch(fetchActivePaySubscriptionReset());
    }, []);

    useEffect(() => {
        if (user !== null) {
            console.log("user", user.id);
            fetchGetSubscriptionList(user.id, 'UNPAID', true);
        }
    }, [user]);
    

    

    // useEffect(() => {
    //     if (countryCustomerList.result !== null) {
    //         let countryCustomerListTemp = [];
    //         countryCustomerList.result.response.map((countryCustomerItem, index) => {
    //             countryCustomerListTemp.push(countryCustomerItem);
    //         });
            
    //         setCountryCustomer(countryCustomerListTemp);
    //     }

    //     if (countryCustomerList.error) {
    //         Alert.alert(
    //             I18n.t("ERROR_LABLE"),
    //             Utils.getErrorMsg(countryCustomerList),
    //             [
    //                 {
    //                     text: I18n.t("OK"), onPress: () => {
    //                         dispatch(fetchGetcountryCustomerListReset());
    //                     }
    //                 }
    //             ],
    //             {cancelable: false}
    //         );
    //                     dropDownAlertRef.alertWithType(
    //                         'error',
    //                         I18n.t('ERROR_LABEL'),
    //                         Utils.getErrorMsg(countryCustomerList),
    //                     );
    //                     dispatch(fetchGetcountryCustomerListReset());
    //     }


       
    // }, [countryCustomerList]);

    useEffect(() => {
        if (subscriptionList.result !== null) {
            let subscriptionListTemp = [];
            subscriptionList.result.response.map((subscriptionItem, index) => {
                subscriptionListTemp.push(subscriptionItem);
            });
            
            setSubscriptions(subscriptionListTemp);
        }

        if (subscriptionList.error) {
            Alert.alert(
                I18n.t("ERROR_LABLE"),
                Utils.getErrorMsg(subscriptionList),
                [
                    {
                        text: I18n.t("OK"), onPress: () => {
                            dispatch(fetchGetSubscriptionListReset());
                        }
                    }
                ],
                {cancelable: false}
            );
                        dropDownAlertRef.alertWithType(
                            'error',
                            I18n.t('ERROR_LABEL'),
                            Utils.getErrorMsg(subscriptionList),
                        );
                        dispatch(fetchGetSubscriptionListReset());
        }


       
    }, [subscriptionList]);

    useEffect(() => {
        
        if (activatePaySubscription.result !== null) {
            console.log("activatePaySubscription", activatePaySubscription);
            if (activatePaySubscription.result.status === 301) {               
                                                               
                            console.warn("activatePaySubscription", activatePaySubscription)
                            navigation.push('webviewScreen', {
                            url: activatePaySubscription.result.response.payment_url,
                            requestBody: { 
                                password: values.password, 
                                amount: values.amount, 
                                //cvv: values.cvv,  
                                payment_method: 'CARD',
                                numero_carte: creditCardInput.values.number.replace(/\s/g, ''),
                                cvv: creditCardInput.values.cvc,
                                expiration_date: creditCardInput.values.expiry,
                                id_wallet_user: wallet.id,
                                customer_surname: values.surnameCustomer,
                                customer_address: values.adressCustomer,
                                customer_city: values.cityCustomer,
                                countrySelect: values.countryCustomer,
                            },
                            transactionType: "USER_PAY_INSURANCE",
                            subscription: subscription
                            
                            });                
                     } 
                   

            if (activatePaySubscription.result.status === 200) {
                console.warn("log: ",activatePaySubscription.result.status )
                        Alert.alert(
                            I18n.t("SUCCESS"),
                            activatePaySubscription.result.response,
                            [
                                {
                                    text: I18n.t("OK"), onPress: () => {
                                        dispatch(fetchActivePaySubscriptionReset());
                                        navigation.goBack()
                                    }
                                }
                            ],
                            {cancelable: false}
                        );
                    
                
            }
        }
      
        if (activatePaySubscription.error) {
            console.log('reponse: ', Utils.getErrorMsg(activatePaySubscription),)
            Alert.alert(
                I18n.t("ERROR_LABLE"),
                Utils.getErrorMsg(activatePaySubscription),
                [
                    {
                        text: I18n.t("OK"), onPress: () => {
                            dispatch(fetchActivePaySubscriptionReset());
                            //navigation.goBack()
                        }
                    }
                ],
                {cancelable: false}
            );
            /*            dropDownAlertRef.alertWithType(
                            'error',
                            I18n.t('ERROR_LABEL'),
                            Utils.getErrorMsg(activatePaySubscription),
                        );
                        dispatch(fetchActivePaySubscriptionReset());*/
        }
 }, [activatePaySubscription]);


  const { resultActiveCountryList, errorActiveCountryList } = useSelector(state => state);

  const { subscriptionList } = useSelector(state => state);

  useEffect(() => {
    if(resultActiveCountryList) {
      // mettre à jour le state
      console.log("ddsd")
      dispatch(getPayCountryNetworkAction({
        id_wallet_user: wallet.id, 
        id_country: resultActiveCountryList.response[0].id  ,
        paysCarteSelect: resultActiveCountryList.response[0].name,
      }));
    }

    if(errorActiveCountryList) {
      if(errorActiveCountryList.data) {
        Alert.alert(
           I18n.t('ERROR_LABEL'),
           errorActiveCountryList.data.error,
             getActiveCountryReset(),
           {cancelable: false}
        );
      } else {
        Alert.alert(
           I18n.t('ERROR_LABEL'),
           JSON.stringify(errorActiveCountryList),
           getActiveCountryReset(),
           {cancelable: false}  
        );
      }
      
      dispatch(getActiveCountryReset());
    }
    // if (resultActiveCountryList.result !== null) {
    //     let resultActiveCountryListTemp = [];
    //     resultActiveCountryList.result.response.map((subscriptionItem, index) => {
    //         resultActiveCountryListTemp.push(subscriptionItem);
    //     });
        
    //     setSubscriptions(resultActiveCountryListTemp);

    // }

    // if (resultActiveCountryList.error) {
    //     Alert.alert(
    //         I18n.t("ERROR_LABLE"),
    //         Utils.getErrorMsg(resultActiveCountryList),
    //         [
    //             {
    //                 text: I18n.t("OK"), onPress: () => {
    //                     dispatch(getPayCountryNetworkAction());
    //                 }
    //             }
    //         ],
    //         {cancelable: false}
    //     );
    //     /*            dropDownAlertRef.alertWithType(
    //                     'error',
    //                     I18n.t('ERROR_LABEL'),
    //                     Utils.getErrorMsg(subscriptionList),
    //                 );
    //                 dispatch(fetchGetSubscriptionListReset());*/
    // }
  }, [resultActiveCountryList]);


    const RegisterSchema = Yup.object().shape({
        password: Yup.string().required(I18n.t('THIS_FIELD_IS_REQUIRED')),
        amount: Yup.number().required(I18n.t('THIS_FIELD_IS_REQUIRED')),
        cvv: Yup.number().required(I18n.t('THIS_FIELD_IS_REQUIRED')),
    });

 
    const onCreditCardChange = (form) => {
        setCreditCardInput(form);
        setDisplayCardError(false);
      }

    const isCreditCardValid = () => {
        const errorMessage = [];
   
        if (typeof creditCardInput.status !== 'undefined') {
   
             if (creditCardInput.status.cvc === 'incomplete')
                  errorMessage.push(I18n.t('CVC_CARD_ERROR') || secureTextEntry=='true');
             if (creditCardInput.status.expiry === 'incomplete')
                  errorMessage.push(I18n.t('EXPIRY_CARD_ERROR'));
             if (creditCardInput.status.number === 'incomplete')
                  errorMessage.push(I18n.t('CARD_NUMBER_ERROR'));
        }
        else
             errorMessage.push(I18n.t('THIS_FIELD_IS_REQUIRED'))
   
        return errorMessage;
   }

    const {
        handleChange,
        handleBlur,
        values,
        errors,
        touched,
        setFieldValue,
        isValid,
    } = useFormik({
        validationSchema: RegisterSchema,
        initialValues: {
            cvv: '',
            password: '',
            amount: '',
            surnameCustomer: '',
            nameCustomer: '',
            adressCustomer: '',
            cityCustomer: '',
            codeZipCustomer: '',
            numero_carte: '',
            expiration_date: '',
            
           
        },
        onSubmit: values => {
            if (user !== null) {
                if (subscription === null) {
                    subscriptionRef.shake(800);
                } else {
                    console.log("subscription", subscription);
                }
            }
        }
    });

    return (
        <ScreenComponent>
            <DropdownAlert ref={ref => (dropDownAlertRef = ref)}/>
            <KeyboardAvoidingView
                behavior={Platform.OS === 'android' ? 'height' : 'padding'}
                style={{flex: 1}}>

                <ScrollView style={styles.container}>
                <Text style={styles.subbigtitle}>{I18n.t('PAIEMENT_FACTURE_CARD_LIER')}</Text>
                            <View style={styles.contain}>


                         
                            <Animatable.View ref={(comp) => {
                                    subscriptionRef = comp
                                }}
                                                 style={{
                                                     width: responsiveWidth(90),
                                                     height: 60,
                                                     alignSelf: 'center',
                                                     borderRadius: 10,
                                                     paddingLeft: 20,
                                                     paddingRight: 20,
                                                     backgroundColor: 'white'
                                                 }}>
                                    <Dropdown
                                        label={I18n.t('SELECT_INSURANCE')}
                                        data={subscriptions}
                                        useNativeDriver={true}
                                        onChangeText={(value, index, data) => {
                                            console.log("Value", value);
                                            setSubscription(
                                                {
                                                    id: value.id,
                                                    insurance_subscription_id: value.insurance_subscription_id,
                                                    network_id: value.network_id,
                                                    user_id: value.user_id,
                                                    number_of_months: value.number_of_months,
                                                    bonus_amount: value.bonus_amount,
                                                    number_of_beneficiaries: value.number_of_beneficiaries,
                                                    total_bonus_amount: value.total_bonus_amount,
                                                    state: value.state,
                                                    created_at: value.created_at,
                                                    updated_at: value.updated_at,
                                                    start_at: value.start_at,
                                                    end_at: value.end_at,
                                                    reason: value.reason,
                                                    network: value.network,
                                                    beneficiaries: value.beneficiaries
                                                }
                                            );
                                        }}
                                        valueExtractor={(value) => {
                                            return value
                                        }}
                                        labelExtractor={(value) => {
                                            return `${I18n.t('MNT')}: ${value.amount} | ${I18n.t('FACT')}: ${value.invoice_id.slice(0, 7)} | ${I18n.t('RESTE')}: ${value.remaining_amount}`
                                        }}
                                    />
                                </Animatable.View>

                                <Animatable.View ref={(comp) => {
                                    paysDestinationAnim = comp
                                }}
                                                style={{
                                                    width: responsiveWidth(90),
                                                    height: 60,
                                                    marginTop: 20,
                                                    alignSelf: 'center',
                                                    borderRadius: 10,
                                                    paddingLeft: 20,
                                                    paddingRight: 20,
                                                    backgroundColor: 'white'
                                                }}>
                                    <Dropdown
                                        label={I18n.t('CARD_COUNTRY')}
                                        data={countryCustomer}
                                        useNativeDriver={true}
                                       //value={values.paysCarteSelect === null ? '' : values.paysCarteSelect}
                                        // onChangeText={(value, index, data) => {
                                        //     console.log("value :", value)
                                        //     console.log("AAAAAA")
                                        //     setCountryCustomer(
                                        //         {
                                        //             id: value.id,
                                        //             //name: value.name
                                        //         }
                                        //     )
                                        // }}
                                         onChangeText={onValueChange} 
                                        
                            
                                        valueExtractor={(value) => {
                                            return value.name
                                        }}
                                        labelExtractor={(value) => {
                                            return value.name
                                        }}
                                        
                                    />
                                    
                                </Animatable.View>
                                 {/* <Animatable.View ref={(comp) => {
                            paysDestinationAnim = comp
                        }}
                                         style={{
                                             width: responsiveWidth(90),
                                             height: 60,
                                             marginTop: 20,
                                             alignSelf: 'center',
                                             borderRadius: 10,
                                             paddingLeft: 20,
                                             paddingRight: 20,
                                             backgroundColor: 'white'
                                         }}>
                            <Dropdown
                                 label={I18n.t('CARD_COUNTRY')}
                                 data={countryCustomer}
                                
                                 useNativeDriver={true}
                                //value={countryCustomer.map(country => ({ label: country.name, value: country.id }))}
                                onChangeText={(value, index, data) => {
                                    
                                }}
                                
                            
                                valueExtractor={(value) => {
                                    return value.name
                                }}
                                labelExtractor={(value) => {
                                    return value.name
                                }}
                           
                            />
                            
                                 </Animatable.View> */}


                                <TextInput
                                    style={{marginTop: 10}}
                                    placeholder={I18n.t('SURNAME')}
                                    value={values.surnameCustomer}
                                    onChangeText={(text) => {
                                        setFieldValue('surnameCustomer', text);
                                    }}
                                    onBlur={handleBlur('surnameCustomer')}
                                    success={touched.surnameCustomer && !errors.surnameCustomer}
                                    touched={touched.surnameCustomer}
                                    error={errors.surnameCustomer}
                                />

                                <TextInput
                                    style={{marginTop: 10}}
                                    placeholder={I18n.t('PRENOM_CLIENT')}
                                    value={values.nameCustomer}
                                    onChangeText={(text) => {
                                        setFieldValue('nameCustomer', text);
                                    }}
                                    onBlur={handleBlur('nameCustomer')}
                                    success={touched.nameCustomer && !errors.nameCustomer}
                                    touched={touched.nameCustomer}
                                    error={errors.nameCustomer}
                                />

                                <TextInput
                                    style={{marginTop: 10}}
                                    placeholder={I18n.t('ADDRESS')}
                                    value={values.adressCustomer}
                                    onChangeText={(text) => {
                                        setFieldValue('adressCustomer', text);
                                    }}
                                    onBlur={handleBlur('adressCustomer')}
                                    success={touched.adressCustomer && !errors.adressCustomer}
                                    touched={touched.adressCustomer}
                                    error={errors.adressCustomer}
                                />

                                <TextInput
                                    style={{marginTop: 10}}
                                    placeholder={I18n.t('CITY')}
                                    value={values.cityCustomer}
                                    onChangeText={(text) => {
                                        setFieldValue('cityCustomer', text);
                                    }}
                                    onBlur={handleBlur('cityCustomer')}
                                    success={touched.cityCustomer && !errors.cityCustomer}
                                    touched={touched.cityCustomer}
                                    error={errors.cityCustomer}
                                />

                                <TextInput
                                    style={{marginTop: 10}}
                                    placeholder={I18n.t('ZIP_CODE')}
                                    value={values.codeZipCustomer}
                                    onChangeText={(text) => {
                                        setFieldValue('codeZipCustomer', text);
                                    }}
                                    onBlur={handleBlur('codeZipCustomer')}
                                    success={touched.codeZipCustomer && !errors.codeZipCustomer}
                                    touched={touched.codeZipCustomer}
                                    error={errors.codeZipCustomer}
                                />


                                <Animatable.View ref={(comp) => {
                                    paysDestinationAnim = comp
                                }}
                                                style={{
                                                    width: responsiveWidth(90),
                                                    height: 60,
                                                    marginTop: 20,
                                                    alignSelf: 'center',
                                                    borderRadius: 10,
                                                    paddingLeft: 20,
                                                    paddingRight: 20,
                                                    backgroundColor: 'white'
                                                }}>
                                    <Dropdown
                                        label={I18n.t('CARD_COUNTRY')}
                                        data={countryCustomer}
                                        useNativeDriver={true}
                                       value={values.paysCarteSelect === null ? '' : values.paysCarteSelect}
                                        onChangeText={(value, index, data) => {
                                            console.log("value :", value)
                                            setCountryCustomer(
                                               
                                            )
                                      
                                        }}
                                        
                            
                                        valueExtractor={(value) => {
                                            return value.name
                                        }}
                                        labelExtractor={(value) => {
                                            return value.name
                                        }}
                                        
                                    />
                                    
                                </Animatable.View>


                                
                                   <Animatable.View ref={(comp) => { codeCVVAnim = comp }}>
                                        <View style={{
                                             overflow: 'hidden',
                                             paddingTop: 16,
                                             backgroundColor: 'white',
                                             marginTop: responsiveHeight(2),
                                             marginLeft: responsiveWidth(5),
                                             marginRight: responsiveWidth(5),
                                             borderRadius: 5,
                                             width: responsiveWidth(88)
                                        }}>
                                             <LiteCreditCardInput
                                                  inputStyle={{
                                                       flex: 1,
                                                       color: 'black',
                                                       fontSize: 18,
                                                       padding: 7,
                                                       paddingLeft: 0,
                                                  }}
                                                //   validColor={creditCardInput.valid ? 'green' : ''}
                                                //   invalidColor={!creditCardInput.valid ? 'red' : ''}
                                                  onChange={onCreditCardChange}
                                                  labels={{
                                                       number: I18n.t('CARD_NUMBER_LABEL'),
                                                       expiry: I18n.t('CARD_EXPIRY_LABEL'),
                                                       cvc: I18n.t('CARD_CVC_LABEL'),
                                                  }} />
                                             {
                                                  (displayCardError) &&
                                                  isCreditCardValid().map((item) => (
                                                       <Text style={{ color: 'red', marginLeft: 15 }}>{item}</Text>
                                                  ))
                                             }
                                        </View>
                                   </Animatable.View>

                                   <TextInput
                                    style={{marginTop: 10}}
                                    placeholder={I18n.t('AMOUNT')}
                                    value={values.amount}
                                    keyboardType='numeric'
                                    onChangeText={(text) => {
                                        setFieldValue('amount', text);
                                    }}
                                    onBlur={handleBlur('amount')}
                                    success={touched.amount && !errors.amount}
                                    touched={touched.amount}
                                    error={errors.amount}
                                />

                                <PasswordInput
                                    style={{marginTop: 10}}
                                    onChangeText={handleChange('password')}
                                    placeholder={I18n.t('PASSWORD')}
                                    secureTextEntry
                                    icon={<FontAwesome name="lock" size={20}/>}
                                    value={values.password}
                                    onBlur={handleBlur('password')}
                                    success={touched.password && !errors.password}
                                    touched={touched.password}
                                    error={errors.password}
                                />
                      
                                <Button
                                     style={styles.btnvalide}
                                     textStyle={styles.textbtnvalide}
                                    full
                                    loading={activatePaySubscription.loading}
                                    
                                    onPress={() => {
                                        fetchActivePaySubscription( {
                                             password: values.password, 
                                             amount: values.amount, 
                                             //cvv: values.cvv,  
                                             payment_method: 'CARD',
                                             numero_carte: values.number,
                                            cvv: values.cvc,
                                            expiration_date: values.expiry,
                                            id_wallet_user: wallet.id,
                                            customer_surname: values.surnameCustomer,
                                            customer_address: values.adressCustomer,
                                            customer_city: values.cityCustomer,
                                            // customer_country: values.countryCustomer,
                                            assurance_selected: (values.subscriptions.filter(element => element.name === values.subscriptionsSelect)).id,
                                            customer_country: countryCustomer.filter((item, i) => item.name === values.countrySelect).code_country
                                            });
                                       
                                    }}
                                    >
                                    {I18n.t('SUBMIT_LABEL')}
                                </Button>
                            </View>
                    {/* {modalPaymentModal && renderPaymentMethodModal()} */}

                </ScrollView>
            </KeyboardAvoidingView>
        </ScreenComponent>
    );
};


const mapStateToProps = createStructuredSelector({
    subscriptionList: selectSubscriptionList,
    activatePaySubscription: selectActivatePaySubscription,
     //resultActiveCountryList: activeCountryListReducer,

   

});

export default connect(mapStateToProps, {
    fetchActivePaySubscription,
    fetchGetSubscriptionList,

    getActiveCountryAction,
    getActiveCountryReset,
    getPayCountryNetworkAction
})(
    AutreCarteM,
);
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: Color.primaryDarkColor,
   },
   btnvalide: {
    marginTop: 20,
    marginLeft: 20,
    marginRight: 20,
    borderColor: 'transparent',
    backgroundColor: Color.accentLightColor,
    height: 52
},
subbigtitle: {
    color: 'white',
    fontSize: 17,
    textAlign: 'center',
    margin: 5,
},
textbtnvalide: {
color: 'white',
fontWeight: 'bold'
},
      dropdownContainer: {
        borderWidth: 1,
        borderRadius: 4,
        paddingHorizontal: 10,
      },
    textInput: {
        height: 46,
        backgroundColor: Color.fieldColor,
        borderRadius: 5,
        marginTop: 10,
        padding: 10,
        width: '100%',
    },
    lineRow: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        paddingBottom: 20,
    },
    contain: {
        alignItems: 'center',
        marginTop: 40,
        paddingBottom: 20,
        paddingLeft: 20,
        paddingRight: 20,
        flex: 1,
    },
    circle: {
        width: CIRCLE_SIZE,
        height: CIRCLE_SIZE,
        borderRadius: CIRCLE_SIZE / 2,
        position: 'absolute',
        top: '15%',
    },
    circleContainer: {
        alignItems: 'flex-end',
        right: -(CIRCLE_SIZE / 3),
        top: -(CIRCLE_SIZE / 1.5),
    },
    lineSeparator: {
        borderWidth: 1,
        width: '40%',
        height: 1,
        alignSelf: 'center',
    },
    line: {
        width: 1,
        height: 14,
        backgroundColor: Color.grayColor,
        marginLeft: 10,
    },
    contentModeView: {
        width: 30,
        height: '100%',
        alignItems: 'flex-end',
        justifyContent: 'center',
    },
    contentFilter: {
        flexDirection: 'row',
        alignItems: 'center',
        marginLeft: 10,
    },
    bottomModal: {
        justifyContent: 'flex-end',
        margin: 0,
    },
    contentFilterBottom: {
        width: "100%",
        borderTopLeftRadius: 8,
        borderTopRightRadius: 8,
        paddingHorizontal: 20
    },
    contentSwipeDown: {
        paddingTop: 10,
        alignItems: 'center',
    },
    lineSwipeDown: {
        width: 30,
        height: 2.5,
        backgroundColor: Color.dividerColor,
    },
    contentActionModalBottom: {
        flexDirection: 'row',
        paddingVertical: 15,
        justifyContent: 'space-between',
        borderBottomWidth: 1,
    },
    containModal: {
        paddingVertical: 10,
        paddingHorizontal: 20,
        flexDirection: 'row',
        justifyContent: 'space-between',
    },
    floatingButtonAdd: {
        backgroundColor: Color.accentColor,
        position: "absolute",
        width: 25,
        bottom: 0,
        zIndex: 1000,
        right: 20,
        top: 35,
        height: 25,
        borderRadius: 12.5,
        alignItems: 'center',
        justifyContent: 'center',
    },
    contentSwitch: {
        width: responsiveWidth(40),
    },
    switch: {},
    choosePhotoBtn: {
        marginTop: 10,
        marginBottom: 10,
        width: "auto",
        height: "auto",
        padding: 5,
        alignItems: 'center',
        borderColor: Color.borderColor,
        marginRight: 10,
        elevation: 2,
    },
    checkbox: {
        alignSelf: "center",
        color: "white"
    },
    itemAmountPerMonth: {
        paddingLeft: 10,
        marginTop: 10,
        flexDirection: 'row',
    },
    dot: {
        width: 12,
        height: 12,
        borderRadius: 6
    },
    blockView: {
        paddingVertical: 10,
        borderBottomWidth: 0.5,
    },
    containPaymentMethod: {
        flex: 1,
        alignItems: 'center',
        paddingHorizontal: 20,
        paddingVertical: 15,
    },
    methodItem: {
        width: '100%',
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        paddingVertical: 15,
        marginBottom: 5,
    },
    iconContent: {
        width: 30,
        marginRight: 10,
        alignItems: 'center',
    },
    input: {
        height: 60,
        marginTop: responsiveHeight(2),
        marginLeft: responsiveWidth(5),
        marginRight: responsiveWidth(5),
        borderRadius: 5,
    }
});