import React, { Component } from 'react';
import {
    Platform,
    StyleSheet,
    View,
    TouchableOpacity,
    Alert,
    SafeAreaView,
    Text,
    TextInput,
    Image,
    FlatList,
    ScrollView
} from 'react-native';
import { observable, action, transaction } from 'mobx';
import { observer, inject } from 'mobx-react';
var _ = require('lodash');
import moment from 'moment'
import Loading from '../../components/Loading';
import Icon from 'react-native-vector-icons/dist/Ionicons';
import Icon2 from 'react-native-vector-icons/dist/MaterialCommunityIcons';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
import CustomLoginButton from '../../components/customLoginButton';
import Toast, { DURATION } from 'react-native-easy-toast';
import GallerySwiper from 'react-native-gallery-swiper';
import { colors } from '../../assets/styles/colors-theme';
import TitleBar from '../../components/titleBar';
import HTMLView from 'react-native-htmlview';
import Menu, {
    MenuProvider,
    MenuTrigger,
    MenuOptions,
    MenuOption,
    renderers,
} from 'react-native-popup-menu';
const { SlideInMenu } = renderers;
import {
    CreditCardInput,
    LiteCreditCardInput,
} from 'react-native-credit-card-input';
//component

// function
import { width, height } from '../../services/screen';
Icon.loadFont();

//const log = new Log()
@inject('appStore')
@observer
export default class GroupList extends Component {


    constructor(props) {
        super(props);
        this.store = props.appStore;
    }
    async componentWillMount() {

    }
    componentDidMount() {

    }



    renderShoppingGroups() {
        return this.store.recommendShoppingGroup.map((items, index) => {
            return (
                <TouchableOpacity
                    style={{
                        width: width - 50,
                        height: 60,
                        backgroundColor: colors.shoppingGroupColor,
                        borderRadius: 10,
                        marginTop: 10,
                        alignItems: 'center',
                        flexDirection: 'row',
                    }}
                    onPress={() => {
                        this.props.navigation.navigate('GroupDetails', {
                            data: items,
                            isRecommend: true,
                        });
                    }}>
                    <View style={{ flex: 0.6, justifyContent: 'center' }}>
                        <Text style={[styles.shoppingGroupText, { marginLeft: 20 }]}>
                            {items.name}
                        </Text>
                    </View>
                    <View style={{ flex: 0.3, alignItems: 'center', flexDirection: 'row' }}>
                        {/* <Icon name="account" size={17} />
            <Text style={[styles.shoppingGroupText, { marginLeft: 5 }]}>
              {4 + '/' + 20}
            </Text> */}
                    </View>
                    <View
                        style={{ flex: 0.1, alignItems: 'center', justifyContent: 'center' }}>
                        <Icon2 name="chevron-right" size={25} />
                    </View>
                </TouchableOpacity>
            );
        });
    }



    render() {
        return (
            <MenuProvider
                style={{ flex: 1, backgroundColor: colors.bgc, alignItems: 'center' }}>
                <Loading loading={this.store.loading} />
                <TitleBar
                    showBack={true}
                    title={this.store.text.shoppingGroup +
                        this.store.text.recommend}
                    self={this}
                />
                {this.store.recommendShoppingGroup.length > 0 ? (<ScrollView>

                    {this.renderShoppingGroups()}
                </ScrollView>) : (<View style={{ flex: 1, alignItems: 'center' }}>
                    <Text style={{ marginTop: 20, color: colors.maingray }}>
                        {this.store.text.noShoppingGroup}
                    </Text>
                </View>)}

                <Toast
                    ref="toast"
                    style={{ backgroundColor: colors.mainColor }}
                    position="bottom"
                    positionValue={100}
                    fadeInDuration={750}
                    fadeOutDuration={2000}
                    opacity={0.8}
                    textStyle={{ color: 'white' }}
                />
            </MenuProvider >
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        backgroundColor: 'white',
    },

    button: {
        marginTop: 20,
        width: width,
        height: 60,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: colors.statusBarColor,
    },
    inputTextView: {
        width: width - 40,
        marginTop: 20,
        borderBottomWidth: 1,
        borderBottomColor: colors.line2Color,
        height: 50,
    },
    inputTextTitleView: {
        fontSize: 14,
        color: colors.line2Color,
    },
    title: {
        fontSize: 17,
        marginTop: 20,
    },
    subtitle: {
        fontSize: 14,
    },
    buttonText: {
        color: '#fff',
    },
    picker: {
        fontSize: 20,
        paddingVertical: 12,
        paddingHorizontal: 10,
        borderWidth: 1,
        borderColor: 'black',
        borderRadius: 4,
        color: 'black',
        paddingRight: 30, // to ensure the text is never behind the icon
    },
    textView: {
        color: colors.mainColor,

        fontSize: 20,
        fontWeight: 'bold',
    },
});
const pickerSelectStyles = StyleSheet.create({
    inputIOS: {
        fontSize: 16,
        paddingVertical: 12,
        paddingHorizontal: 10,
        borderWidth: 1,
        borderColor: 'gray',
        borderRadius: 4,
        color: 'black',
        paddingRight: 30, // to ensure the text is never behind the icon
    },
    inputAndroid: {
        fontSize: 16,
        paddingHorizontal: 10,
        paddingVertical: 8,
        borderWidth: 0.5,
        borderColor: 'black',
        borderRadius: 8,
        color: 'black',
        paddingRight: 30, // to ensure the text is never behind the icon
    },
});
