import React from 'react';
import { SafeAreaView, Text, Image, Alert, Linking, View, TouchableOpacity, StyleSheet, TextInput, Keyboard, DatePickerIOS, ScrollView } from 'react-native';
import { inject, observer } from "mobx-react"
import { observable, makeObservable } from 'mobx'
import Loading from '../../components/Loading'
import { width, height } from '../../services/screen';
import { colors } from '../../assets/styles/colors-theme';
import { images } from '../../assets/images/imageIndex';
import AsyncStorage from '@react-native-community/async-storage';
import moment from 'moment'
import { getStatusBarHeight } from 'react-native-status-bar-height';
import CustomLoginButton from '../../components/customLoginButton';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
import CustomCircleButton from '../../components/customCircleButton'
import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
import Setting from '../../components/setting'
import DatePicker from 'react-native-date-picker'
Icon.loadFont();
const Invoice = inject("appStore")(observer(class Invoice extends React.Component {


    settingViewAble = false

    data = {}

    lang = this.props.appStore.lanuageSelection

    additionalItems = []

    date = moment().toDate()
    constructor(props) {
        super(props);
        this.store = props.appStore;
        makeObservable(this, {
            settingViewAble: observable,

            data: observable,

            lang: observable,

            additionalItems: observable,

            date: observable,
        })
        this.data = this.props.route.params.data
    }
    async componentDidMount() {

    }

    componentWillMount() {
        // this.store.orderData.map((items, index) => {
        //     items.allPrice = items.price
        //     items.qty = 1
        //     items.discount = 0,
        //         items.charges = 0,

        //         items.options.map((item, i) => {
        //             if (item.type == 0 || item.type == 2) {
        //                 items.allPrice += item.selections[item.index].price

        //             }
        //         })
        // })
    }

    amountHandler(data) {
        return (((parseInt(data.allPrice) * (1 - (parseInt(data.discount) / 100)) * parseInt(data.qty)) + parseInt(data.charges))).toFixed(1)
    }

    totalPriceHandler() {
        var price = 0
        this.store.orderData.map((items, index) => {
            price = price + parseInt(this.amountHandler(items))
        })
        this.additionalItems.map((items, index) => {
            price = price + parseInt(this.amountHandler(items))
        })
        return price.toFixed(1)
    }

    orderAction() {
        this.store.orderPost(this.store.orderData, this.additionalItems, this)

    }

    edit(data, index, additional) {
        if (!additional) {
            this.props.navigation.navigate('SuitStyle', { data: JSON.parse(JSON.stringify(data)), edit: true, index: index })
        }
    }

    async clickAction(data) {
        if (data.type == 0) {
            var previewData = this.store.clone(data)
            previewData.options = previewData.optionValues;
            await previewData.options.map(async (items, index) => {
                items.optionsId = items.id
                items = Object.assign(items, items.option)
                if (items.type == 2) {
                    items.index = items.selections.findIndex(e => e.id == parseInt(items.value))
                }
            })
        }
        await previewData.options.sort((a, b) => a.previewIndex - b.previewIndex);
        console.log(data)
        console.log(previewData)
        previewData.name = previewData.suit.name;
        previewData.nameEn = previewData.suit.nameEn
        this.props.navigation.navigate('ConfirmSuit', { data: previewData, order: false })
    }

    renderItem(data, index, additional) {
        return (
            <TouchableOpacity style={{ width: width - 40, flexDirection: 'row', marginTop: 10 }}
                onPress={() => this.clickAction(data)}>

                <View style={{ flex: 0.3, alignItems: 'center', flexDirection: 'row' }}>
                    <Text style={[styles.itemsText, { marginRight: 10 }]}>
                        {index + 1}
                    </Text>
                    <Text style={styles.itemsText}>
                        {!additional ? data.suit.nameEn : data.name}
                    </Text>

                </View>
                <View style={{ flex: 0.125, justifyContent: 'center', alignItems: 'center' }}>
                    <View style={{ justifyContent: 'center', alignItems: 'center', }}>

                        <Text style={[styles.itemsText,]}>
                            {data.qty}
                        </Text>
                    </View>
                </View>
                <View style={{ flex: 0.125, justifyContent: 'center', alignItems: 'center' }}>
                    <Text style={styles.itemsText}>
                        {this.store.currencyFormat(data.price)}
                    </Text>

                </View>
                <View style={{ flex: 0.125, justifyContent: 'center', alignItems: 'center' }}>
                    <View style={{ justifyContent: 'center', alignItems: 'center', }}>


                        <Text style={[styles.itemsText]}>{!additional ? data.discount + " %" : ''}</Text>
                    </View>
                </View>
                <View style={{ flex: 0.125, justifyContent: 'center', alignItems: 'center' }}>
                    <View style={{ justifyContent: 'center', alignItems: 'center', }}>


                        <Text style={[styles.itemsText,]}>{!additional ? this.store.currencyFormat(data.charges) : ''}</Text>
                    </View>
                </View>

                <View style={{ flex: 0.2, justifyContent: 'center', alignItems: 'center' }}>
                    <Text style={styles.itemsText}>
                        {this.store.currencyFormat(data.amount)}
                    </Text>
                </View>

            </TouchableOpacity>
        )
    }


    render() {
        return (

            <SafeAreaView
                style={{
                    flex: 1,
                    backgroundColor: 'white',
                    alignItems: 'center'
                }}>
                <Loading loading={this.store.loading} />
                <ScrollView>
                    <View style={{ marginTop: Platform.OS === 'ios' ? 40 : getStatusBarHeight(), alignItems: 'center' }}>
                        <Image source={images.title.logo} />
                    </View>
                    <View style={{ flex: 1, alignItems: 'center' }}>


                        <Text style={{ fontSize: 24, color: colors.buttonColor, marginTop: 10, fontWeight: '600' }}>
                            {'Invoice'}
                        </Text>
                        <View style={{ width: width }}>
                            <Text style={styles.headerText}>
                                {"Invoice No.: #" + this.data.id}
                            </Text>
                            <Text style={styles.headerText}>
                                {"Date: " + moment(this.data.created).format('DD/MM/YYYY')}
                            </Text>
                            <Text style={styles.headerText}>
                                {"Sales: " + this.data.sales.name}
                            </Text>
                            <Text style={[styles.headerText, { marginTop: 10 }]}>
                                {"Bill To: " + this.data.member.name}
                            </Text>
                            <Text style={styles.headerText}>
                                {"Contact: " + this.data.member.mobile}
                            </Text>
                        </View>

                        <View style={{ width: width - 40, height: 40, flexDirection: 'row', borderBottomWidth: 1, borderBottomColor: colors.buttonColor }}>
                            <View style={{ flex: 0.3, justifyContent: 'center', }}>
                                <Text style={styles.itemsTitleText}>
                                    {'Item'}
                                </Text>
                            </View>
                            <View style={{ flex: 0.125, justifyContent: 'center', alignItems: 'center' }}>
                                <Text style={styles.itemsTitleText}>
                                    {'Qty'}
                                </Text>
                            </View>
                            <View style={{ flex: 0.125, justifyContent: 'center', alignItems: 'center' }}>
                                <Text style={styles.itemsTitleText}>
                                    {'Unit Price'}
                                </Text>
                            </View>
                            <View style={{ flex: 0.125, justifyContent: 'center', alignItems: 'center' }}>
                                <Text style={styles.itemsTitleText}>
                                    {'Discount'}
                                </Text>
                            </View>
                            <View style={{ flex: 0.125, justifyContent: 'center', alignItems: 'center' }}>
                                <Text style={styles.itemsTitleText}>
                                    {'Charges'}
                                </Text>
                            </View>

                            <View style={{ flex: 0.2, justifyContent: 'center', alignItems: 'center' }}>
                                <Text style={styles.itemsTitleText}>
                                    {'Amount (HKD)'}
                                </Text>
                            </View>

                        </View>

                        {this.data.items.map((items, index) => {
                            if (items.type == 0) {
                                return (
                                    this.renderItem(items, index, false)
                                )
                            }
                        })}
                        <View style={{ width: width - 40 }}>
                            <Text style={[styles.itemsTitleText, { marginTop: 40, fontWeight: '600' }]}>
                                {'Additional Item'}
                            </Text>
                        </View>
                        {this.data.items.map((items, index) => {
                            if (items.type == 1)
                                return (
                                    this.renderItem(items, index, true)
                                )
                        })}

                        <View style={{ marginTop: 100, width: width - 40, height: 1, backgroundColor: colors.buttonColor }} />
                        <View style={{ width: width - 40, marginTop: 20, alignItems: 'flex-end' }}>
                            <Text style={[styles.itemsTitleText, { marginRight: 30, fontWeight: '800' }]}>
                                {'Total Amount (HKD)     ' + this.store.currencyFormat(this.data.amount)}
                            </Text>
                        </View>
                        <View style={{ width: width - 40, marginTop: 30, }}>
                            <Text style={[styles.itemsTitleText, { marginRight: 30, fontWeight: '600' }]}>
                                {"TERMS & CONDITION"}
                            </Text>
                        </View>
                        <View style={{ width: width - 40, marginTop: 20, flexDirection: 'row' }}>
                            <Text style={[styles.itemsText]}>
                                {"1."}
                            </Text>
                            <Text style={[styles.itemsText, { width: 700, marginLeft: 5 }]}>
                                {"Merchandises sold are not refundable. Exchange is allowed within 7 days only providing that the merchandises are in to original product packaging, tags and labels."}
                            </Text>
                        </View>
                        <View style={{ width: width - 40, marginTop: 5, flexDirection: 'row' }}>
                            <Text style={[styles.itemsText]}>
                                {"2."}
                            </Text>
                            <Text style={[styles.itemsText, { width: 700, marginLeft: 5 }]}>
                                {"No exchange for used, damaged, altered merchandises."}
                            </Text>
                        </View>
                        <View style={{ width: width - 40, marginTop: 5, flexDirection: 'row' }}>
                            <Text style={[styles.itemsText]}>
                                {"3."}
                            </Text>
                            <Text style={[styles.itemsText, { width: 700, marginLeft: 5 }]}>
                                {"In case of any deputes, the decision of Zuitable shall be final."}
                            </Text>
                        </View>
                        <View style={{ width: width - 40, marginTop: 5, flexDirection: 'row' }}>
                            <Text style={[styles.itemsText]}>
                                {"4."}
                            </Text>
                            <Text style={[styles.itemsText, { width: 700, marginLeft: 5 }]}>
                                {"There is on free suit adjustment section within our talloring service, after that customers have to pay for suit adjustment."}
                            </Text>
                        </View>
                        <View style={{ width: width - 40, marginTop: 5, flexDirection: 'row' }}>
                            <Text style={[styles.itemsText]}>
                                {"5."}
                            </Text>
                            <Text style={[styles.itemsText, { width: 700, marginLeft: 5 }]}>
                                {"Please collect your order within one month upon Zuitable contact you, otherwise Zuitable will not be responsible for any misfit nor damage of your order."}
                            </Text>
                        </View>
                        <View style={{ width: width - 40, marginTop: 40, alignItems: 'flex-end' }}>
                            <Text style={[styles.itemsText, { width: 250, marginRight: 20 }]}>
                                {"Zuitable"}
                            </Text>
                            <Text style={[styles.itemsText, { width: 250, marginRight: 20 }]}>
                                {"1/F, 9 Humphreys Avenue, Tsim Sha Tsui, Kowloon, Hong Kong"}
                            </Text>
                            <Text style={[styles.itemsText, { width: 250, marginRight: 20, marginTop: 10 }]}>
                                {"zuitablehk@gmail.com"}
                            </Text>
                            <Text style={[styles.itemsText, { width: 250, marginRight: 20, }]}>
                                {"Tel: 852 6468 1119"}
                            </Text>

                        </View>
                    </View>
                </ScrollView>
            </SafeAreaView>

        );
    }
}))

const styles = StyleSheet.create({
    headerText: {
        color: colors.buttonColor,
        fontSize: 17,
        marginLeft: 20,
    },
    itemsTitleText: {
        fontSize: 17,
        fontWeight: '600',
        color: colors.buttonColor
    },
    itemsText: {
        fontSize: 17,
        color: colors.buttonColor
    },
    rowView: {
        flexDirection: 'row', width: 800, height: 50, justifyContent: 'center', alignItems: 'center',
    },
    rowLeftView: {
        flex: 0.3, alignItems: 'flex-end', justifyContent: 'center',
    },
    rowRightView: {
        flex: 0.6, flexDirection: 'row', marginLeft: 40, alignItems: 'center'
    },
    rowTitleView: {
        color: colors.buttonColor, fontSize: 20
    },
    inputTextBorder: {
        width: 350, height: 40, justifyContent: 'center', alignItems: 'center', flexDirection: 'row', borderWidth: 1, borderColor: colors.buttonColor, borderRadius: 10
    },
    inputTextView: {
        color: colors.buttonColor,
        width: 350,
        height: 40,
        fontSize: 20,
        marginLeft: 10,
        marginBottom: Platform.OS === 'ios' ? 3 : 0,
        paddingVertical: 0,
    }
});

export default Invoice