import React from 'react';
import { SafeAreaView, Text, Image, Alert, Linking, View, ScrollView, TouchableOpacity } from 'react-native';
import { inject, observer } from "mobx-react"
import { observable, makeObservable } from 'mobx'
import { images } from '../../assets/images/imageIndex';
import AsyncStorage from '@react-native-community/async-storage';
import { getStatusBarHeight } from 'react-native-status-bar-height';
import Loading from '../../components/Loading'
import CustomLoginButton from '../../components/customLoginButton'
import Setting from '../../components/setting'
import { width, height } from '../../services/screen';
import moment from 'moment'
import { colors } from '../../assets/styles/colors-theme';
import Menu, {
    MenuProvider,
    MenuTrigger,
    MenuOptions,
    MenuOption,
    renderers,
} from 'react-native-popup-menu';
import Order from '../order/order';

const { SlideInMenu } = renderers;
const OrderRecord = inject("appStore")(observer(class OrderRecord extends React.Component {

    lang = this.props.appStore.lanuageSelection
    settingViewAble = false

    constructor(props) {
        super(props);
        this.store = props.appStore;
        makeObservable(this, {
            lang: observable,
            settingViewAble: observable,
        })
    }
    async componentWillMount() {
        this.store.getOrder()
    }

    statusHandler(text) {
        const lang = this.store.text;
        switch (text) {
            case 'PC':
                return lang.pc;
                break;
            case 'PP':
                return lang.pp;
                break;
            case 'PRV':
                return lang.prv;
                break;
            case 'PRJ':
                return lang.prj;
                break;
            case 'PA':
                return lang.pa;
                break;
            case 'ARV':
                return lang.arv;
                break;
            case 'FIN':
                return lang.fin;
                break;
            case 'CAN':
                return lang.can;
                break;
            case 'EXP':
                return lang.exp;
                break;
        }
    }

    async selectAction(select, data) {
        console.log(data)
        switch (select) {
            case 0:
                console.log(select)
                this.props.navigation.navigate('Invoice', { data: this.store.clone(data) })
                break;
            case 1:

                break;
            case 2:
                this.editOrderAction(data)
                break;
        }
    }

    async editOrderAction(data) {
        const orderData = this.store.clone(data);
        this.store.orderData = []
        var additional = []
        await Promise.all(orderData.items.map(async (productItems, index) => {
            if (productItems.type == 0) {
                productItems.options = await this.optionsHandler(productItems.optionValues)
                await productItems.options.sort((a, b) => a.previewIndex - b.previewIndex);
                await this.store.orderData.push(productItems)
                // console.log(this.store.orderData)
            } else {
                additional.push(productItems)
            }
        }))
        console.log(this.store.orderData)
        this.props.navigation.navigate("Order", { order: false, member: data.member, sales: data.sales, data: data, additionalItems: additional })
    }

    async optionsHandler(data) {
        await data.map(async (item, itemIndex) => {
            item.optionsId = item.id
            item = await Object.assign(item, item.option)
            if (item.valueType == 2) {
                item.index = await item.selections.findIndex(e => e.id == parseInt(item.value))
            }
        })
        return data
    }

    render() {
        const title = [this.store.text.orderNumber, this.store.text.date, this.store.text.customer, this.store.text.sales, this.store.text.price, this.store.text.orderStatus]
        return (
            <MenuProvider
                style={{
                    flex: 1,
                    backgroundColor: 'white',
                }}>
                <Loading loading={this.store.loading} />
                <View style={{ marginTop: Platform.OS === 'ios' ? 40 : getStatusBarHeight() }}>
                    <Image style={{ marginLeft: 40, }} source={images.title.logo} />
                </View>
                <View style={{ flex: 1 }}>
                    <View style={{ flex: 0.9, alignItems: 'center' }}>
                        <Text style={{ marginTop: 40, fontSize: 25, color: colors.buttonColor, }}>
                            {this.store.text.record}
                        </Text>
                        <View style={{ width: width - 40, alignItems: 'center', height: 50, marginTop: 30 }}>
                            <View style={{ flex: 1, flexDirection: 'row', borderBottomWidth: 1, borderBottomColor: colors.buttonColor }}>
                                {title.map((items, index) => {
                                    return (
                                        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                                            <Text style={{ fontSize: 17, color: colors.buttonColor }}>
                                                {items}
                                            </Text>
                                        </View>
                                    )
                                })}
                            </View>
                        </View>
                        <ScrollView >
                            {this.store.orderRecord.map((items, index) => {
                                return (
                                    <Menu
                                        name={"" + index}
                                        renderer={SlideInMenu}
                                        onSelect={value => {
                                            this.selectAction(value, items)
                                        }}>
                                        <MenuTrigger style={{ width: width - 40, flexDirection: 'row', marginTop: 20 }}>
                                            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                                                <Text style={{ fontSize: 17, color: colors.buttonColor }}>
                                                    {items.id}
                                                </Text>
                                            </View>
                                            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                                                <Text style={{ fontSize: 17, color: colors.buttonColor }}>
                                                    {moment(items.created).format('DD/MM/YYYY')}
                                                </Text>
                                            </View>
                                            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                                                <Text style={{ fontSize: 17, color: colors.buttonColor }}>
                                                    {items.member.name}
                                                </Text>
                                            </View>
                                            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                                                <Text style={{ fontSize: 17, color: colors.buttonColor }}>
                                                    {items.sales.name}
                                                </Text>
                                            </View>
                                            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                                                <Text style={{ fontSize: 17, color: colors.buttonColor }}>
                                                    {this.store.currencyFormat(items.amount)}
                                                </Text>
                                            </View>
                                            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                                                <Text style={{ fontSize: 17, color: colors.buttonColor }}>
                                                    {this.statusHandler(items.status)}
                                                </Text>
                                            </View>
                                        </MenuTrigger>
                                        <MenuOptions
                                            customStyles={{
                                                optionText: {
                                                    margin: 5,
                                                    color: colors.buttonColor,
                                                    fontSize: 20,
                                                },
                                                optionWrapper: {
                                                    backgroundColor: 'white',
                                                    alignItems: 'center',
                                                },
                                            }}>

                                            <MenuOption value={0} text={this.store.text.invoice} />

                                            <MenuOption value={2} text={this.store.text.edit} />
                                        </MenuOptions>
                                    </Menu>
                                )
                            })}
                            <TouchableOpacity style={{ marginTop: 20, marginBottom: 20, justifyContent: 'center', alignItems: 'center' }}>
                                <Text style={{ fontSize: 20, color: colors.buttonColor }}>
                                    Load More
                                </Text>
                            </TouchableOpacity>
                        </ScrollView>

                    </View>

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


                        <Setting self={this} settingViewAble={this.settingViewAble} onPress={() => { this.settingViewAble = !this.settingViewAble }} />

                    </View>

                </View>
            </MenuProvider>
        );
    }
}))
export default OrderRecord
