/**
 * Project iLinkWorld
 * File AddBeneficiaryScreen
 * Path screens/wallet/user
 * Created by BRICE ZELE
 * Date: 19/10/2021
 */
/**
 * Project iLinkWorld
 * File InsuranceSubscriptionScreen
 * Path screens/wallet/user
 * Created by BRICE ZELE
 * Date: 18/10/2021
 */
import React, {useState} from 'react';
import {
    Dimensions,
    KeyboardAvoidingView,
    Platform,
    ScrollView,
    StyleSheet,
    TouchableOpacity,
    View,
} from 'react-native';
import {createStructuredSelector} from 'reselect';
import {connect} from 'react-redux';
import Modal from 'react-native-modal';
import DropDownPicker from 'react-native-dropdown-picker';
import {useFormik} from 'formik';
import * as Yup from 'yup';
import {Color} from "../../../config/Color";
import I18n from 'react-native-i18n';
import {ScreenComponent} from "../../../components/ScreenComponent";
import TextInput from '../../../components/TextInput';
import Text from '../../../components/Text';
import PasswordInput from '../../../components/PasswordInput';
import Button from "../../../components/Button";
import Icon from "react-native-vector-icons/FontAwesome5";
import FontAwesome from "react-native-vector-icons/FontAwesome";
import {responsiveWidth} from "react-native-responsive-dimensions";
import SwitchSelector from "react-native-switch-selector";
import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";

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

const styles = StyleSheet.create({
    textInput: {
        height: 46,
        backgroundColor: Color.fieldColor,
        borderRadius: 5,
        marginTop: 10,
        padding: 10,
        width: '100%',
    },
    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: {},
});

const AddBeneficiaryScreen = ({}) => {

    const [modalVisible, setModalVisible] = useState(false);
    const [isDropdownOpen, setIsDropdownOpen] = useState(false);
    const [insurance, setInsurance] = useState(null);
    const [insurances, setInsurances] = useState([
        {label: 'Assurance 1', value: 'apple'},
        {label: 'Assurance 2', value: 'banana'}
    ]);
    const [validationOption, setValidationOption] = useState([
        {label: I18n.t('YES'), value: 0},
        {label: I18n.t('NO'), value: 1},
    ]);
    const [sexeOption, setSexeOption] = useState([
        {label: I18n.t('MASCULIN'), value: 0},
        {label: I18n.t('FEMININ'), value: 1},
    ]);
    const [affiliation, setAffliliation] = useState([
        {label: I18n.t('ENFANT'), value: 0},
        {label: I18n.t('CONJOINT'), value: 1},
    ]);

    const RegisterSchema = Yup.object().shape({
        name: Yup.string().required(I18n.t('name_required')),
        surname: Yup.string(),
        email: Yup.string()
            .email(I18n.t('email_invalid'))
            .required(I18n.t('email_required')),
        password: Yup.string()
            .required(I18n.t('password_required'))
            .matches(
                /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})/,
                I18n.t('your_password_must_match'),
            ),
    });

    const {handleChange, handleSubmit, handleBlur, values, errors, touched} =
        useFormik({
            validationSchema: RegisterSchema,
            initialValues: {
                name: '',
                surname: '',
                email: '',
                password: '',
            },
            onSubmit: values => {


            },
        });


    const renderAddNewIdentification = () => (
        <View style={[styles.containModal, {backgroundColor: Color.containerBackgroundColor}]}>
            <Modal
                isVisible={modalVisible}
                onSwipeComplete={() => {
                    setModalVisible(false);
                }}
                swipeDirection={['down']}
                style={styles.bottomModal}>
                <View
                    style={[
                        styles.contentFilterBottom,
                        {backgroundColor: Color.containerBackgroundColor},
                    ]}>
                    <View style={styles.contentSwipeDown}>
                        <View style={styles.lineSwipeDown}/>
                    </View>

                    <Text body2 style={{marginTop: 10}}>{I18n.t('ADD_AYANT_DROIT')}</Text>
                    <TextInput
                        style={{marginTop: 10}}
                        placeholder={I18n.t('NOM_ASSURE')}
                        value={values.surname}
                        onChangeText={handleChange('surname')}
                        onBlur={handleBlur('surname')}
                        success={touched.surname && !errors.surname}
                        touched={touched.surname}
                        error={errors.surname}
                    />

                    <TextInput
                        style={{marginTop: 10}}
                        placeholder={I18n.t('PRENOM_ASSURE')}
                        value={values.surname}
                        onChangeText={handleChange('surname')}
                        onBlur={handleBlur('surname')}
                        success={touched.surname && !errors.surname}
                        touched={touched.surname}
                        error={errors.surname}
                    />

                    <TextInput
                        style={{marginTop: 10}}
                        placeholder={I18n.t('DATE_NAISSANCE')}
                        value={values.surname}
                        onChangeText={handleChange('surname')}
                        onBlur={handleBlur('surname')}
                        success={touched.surname && !errors.surname}
                        touched={touched.surname}
                        error={errors.surname}
                    />

                    <View style={{
                        marginTop: 10,
                        width: "100%",
                        flexDirection: 'row',
                        justifyContent: "space-between"
                    }}>
                        <Text body2>{I18n.t('SEXE')}</Text>
                        <View style={styles.contentSwitch}>
                            <SwitchSelector options={sexeOption}
                                            initial={0}
                                            buttonColor={Color.accentColor}
                                            backgroundColor={Color.primaryDarkColor}
                                            textColor='white'
                                            bold={true}
                                            hasPadding
                                            height={32}
                                            onPress={(value) => {
                                            }}/>
                        </View>
                    </View>

                    <View style={{
                        marginTop: 10,
                        width: "100%",
                        flexDirection: 'row',
                        justifyContent: "space-between"
                    }}>
                        <Text body2>{I18n.t('AFFILIATION')}</Text>
                        <View style={styles.contentSwitch}>
                            <SwitchSelector options={affiliation}
                                            initial={0}
                                            buttonColor={Color.accentColor}
                                            backgroundColor={Color.primaryDarkColor}
                                            textColor='white'
                                            bold={true}
                                            hasPadding
                                            height={32}
                                            onPress={(value) => {
                                            }}/>
                        </View>
                    </View>

                    <TouchableOpacity style={{
                        marginTop: 10,
                        width: 50,
                        height: 50,
                        padding: 5,
                        borderWidth: 1,
                        borderColor: Color.borderColor
                    }}>
                        <MaterialCommunityIcons name="camera-image" size={40} color={Color.accentColor}/>
                    </TouchableOpacity>

                    <Button
                        style={{marginTop: 20, marginBottom: 20}}
                        full
                        loading={false}
                        onPress={handleSubmit}>
                        {I18n.t('SUBMIT_LABEL')}
                    </Button>

                </View>
            </Modal>
        </View>
    );

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

                <ScrollView style={{flex: 1}}>
                    <View style={styles.contain}>

                        <DropDownPicker
                            open={isDropdownOpen}
                            value={insurance}
                            items={insurances}
                            setOpen={setIsDropdownOpen}
                            setValue={setInsurance}
                            setItems={setInsurances}
                            style={{borderWidth: 0, zIndex: 10}}
                            containerStyle={{borderWidth: 0}}
                        />

                        <TouchableOpacity
                            style={[styles.floatingButtonAdd]}
                            onPress={() => setModalVisible(true)}
                            activeOpacity={0.9}>
                            <View>
                                <View>
                                    <Icon name='plus' color={Color.whiteColor} size={20}/>
                                </View>
                            </View>
                        </TouchableOpacity>

                        <TextInput
                            style={{marginTop: 10}}
                            placeholder={I18n.t('NUMERO_ASSURE')}
                            icon={<FontAwesome name="user" size={20}/>}
                            value={values.surname}
                            onChangeText={handleChange('surname')}
                            onBlur={handleBlur('surname')}
                            success={touched.surname && !errors.surname}
                            touched={touched.surname}
                            error={errors.surname}
                        />
                        <TextInput
                            style={{marginTop: 10}}
                            placeholder={I18n.t('AMOUNT_PRIME')}
                            keyboardType="decimal-pad"
                            icon={<FontAwesome name="money" size={20}/>}
                            onChangeText={handleChange('name')}
                            value={values.name}
                            onBlur={handleBlur('name')}
                            success={touched.name && !errors.name}
                            touched={touched.name}
                            error={errors.name}
                        />
                        <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}
                        />
                        <View style={{
                            marginTop: 10,
                            width: "100%",
                            flexDirection: 'row',
                            justifyContent: "space-between"
                        }}>
                            <Text body2>{I18n.t('VALIDATION')}</Text>
                            <View style={styles.contentSwitch}>
                                <SwitchSelector options={validationOption}
                                                initial={0}
                                                buttonColor={Color.accentColor}
                                                backgroundColor={Color.primaryDarkColor}
                                                textColor='white'
                                                bold={true}
                                                hasPadding
                                                height={32}
                                                onPress={(value) => {
                                                }}/>
                            </View>
                        </View>

                        <Button
                            style={{marginTop: 20}}
                            full
                            loading={false}
                            onPress={handleSubmit}>
                            {I18n.t('SUBMIT_LABEL')}
                        </Button>

                    </View>
                </ScrollView>
            </KeyboardAvoidingView>
            {modalVisible && renderAddNewIdentification()}
        </ScreenComponent>
    );
};

const mapStateToProps = createStructuredSelector({});

export default connect(mapStateToProps, {})(
    AddBeneficiaryScreen,
);