import React, { Component } from 'react';
import {
    Platform,
    StyleSheet,
    View,
    TouchableOpacity,
    Alert,
    SafeAreaView,
    Text,
    TextInput,
    Image,
    FlatList
} 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 Notification extends Component {


    constructor(props) {
        super(props);
        this.store = props.appStore;
    }
    async componentWillMount() {
        this.store.getNotificationsMessage();
    }
    componentDidMount() {
        this.store.allRead()
    }
    renderItem = ({ item }) => {

        return (
            <TouchableOpacity style={{ width: width, height: 50, flexDirection: 'row', alignItems: 'center' }}
                onPress={() => { this.showMessage(item) }}>
                <View style={{ flex: 0.7, justifyContent: 'center', }}>
                    <Text style={{ marginLeft: 20 }}>
                        {item.title}
                    </Text>
                </View>
                <View style={{ flex: 0.3, justifyContent: 'center', }}>
                    <Text style={{ marginRight: 20 }}>
                        {moment(item.date).format('DD/MM/YYYY')}
                    </Text>
                </View>
            </TouchableOpacity>
        );
    };

    sortDate(data) {
        return data.sort((a, b) => {
            return moment(b.date).format('YYYYMMDDhhmmss') - moment(a.date).format('YYYYMMDDhhmmss')
        });
    }


    showMessage(data) {
        Alert.alert(
            data.title,
            data.message,
            [
                {
                    text: this.store.text.sure,
                    style: "cancel",
                },
            ],
            {
                cancelable: true,
                onDismiss: () =>
                    Alert.alert(
                        "This alert was dismissed by tapping outside of the alert dialog."
                    ),
            }
        );
    }


    render() {
        return (
            <MenuProvider
                style={{ flex: 1, backgroundColor: colors.bgc, alignItems: 'center' }}>
                <Loading loading={this.store.loading} />
                <TitleBar
                    showBack={true}
                    title={this.store.text.notification}
                    self={this}
                    notification={true}
                    onPress={() => { this.store.deleteNotifications() }}
                />
                <View style={{ width: width, height: 50, flexDirection: 'row', alignItems: 'center' }}>
                    <View style={{ flex: 0.7, justifyContent: 'center', }}>
                        <Text style={{ marginLeft: 20 }}>
                            {this.store.text.title}
                        </Text>
                    </View>
                    <View style={{ flex: 0.3, justifyContent: 'center', }}>
                        <Text style={{ marginRight: 20 }}>
                            {this.store.text.date}
                        </Text>
                    </View>
                </View>
                <FlatList
                    data={this.sortDate(this.store.notificationRecord.notifications)}
                    renderItem={this.renderItem}
                    keyExtractor={(item) => item.id}

                />

                <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
    },
});
