import React from 'react';
import { SafeAreaView, Text, Image, Alert, Linking, View, TouchableOpacity } from 'react-native';
import { inject, observer } from "mobx-react"
import { observable, makeObservable } from 'mobx'
var _ = require('lodash');
import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
import { colors } from '../../assets/styles/colors-theme';
import { images } from '../../assets/images/imageIndex';
import AsyncStorage from '@react-native-community/async-storage';
import { getStatusBarHeight } from 'react-native-status-bar-height';
import CustomLoginButton from '../../components/customLoginButton'
import Setting from '../../components/setting'
import { ScrollView } from 'react-native-gesture-handler';
import { launchCamera, launchImageLibrary } from 'react-native-image-picker';
const ConfirmSuit = inject("appStore")(observer(class ConfirmSuit extends React.Component {


    lang = this.props.appStore.lanuageSelection
    settingViewAble = false
    index = 0
    optionsIndex = 0
    isOrder = true
    constructor(props) {
        super(props);
        this.store = props.appStore;
        makeObservable(this, {
            lang: observable,
            settingViewAble: observable,
            index: observable,
            optionsIndex: observable,
            isOrder: observable,
        })
        this.data = this.props.route.params.data
        this.isOrder = this.props.route.params.order
    }
    async componentWillMount() {
        this.data.frontImage = null
        this.data.backImage = null
    }

    getPhoto(frontOrBack) {
        launchImageLibrary({
            selectionLimit: 1,
            mediaType: 'photo',
            includeBase64: true,
        }, (response) => {
            console.log(response)

            if (response.didCancel) {
                console.log('User cancelled image picker');
            } else if (response.error) {
                console.log('ImagePicker Error: ', response.error);
            } else if (response.customButton) {
                console.log('User tapped custom button: ', response.customButton);
            } else {
                if (frontOrBack) {
                    this.data.frontImage = response.assets[0]
                    console.log(this.data.frontImage.uri)
                } else {
                    this.data.backImage = response.assets[0]
                }
            }

        });
    }
    async sideClickAction(value) {
        this.index = value;
        var optionsIndex = 0
        switch (value) {
            case 0:
                optionsIndex = await this.data.options.findIndex(e => e.previewOptions == 1 || e.previewOptions == 3 || e.previewOptions == 5 || e.previewOptions == 7)
                console.log(optionsIndex)
                // if (optionsIndex >= 0) {
                //     this.optionsIndex = optionsIndex
                // }
                this.optionsIndex = optionsIndex
                break;
            case 1:
                optionsIndex = await this.data.options.findIndex(e => e.previewOptions == 2 || e.previewOptions == 3 || e.previewOptions == 7 || e.previewOptions == 7)
                console.log(optionsIndex)
                // if (optionsIndex >= 0) {
                //     this.optionsIndex = optionsIndex
                // }
                this.optionsIndex = optionsIndex
                break;
            case 2:
                optionsIndex = await this.data.options.findIndex(e => e.previewOptions == 4 || e.previewOptions == 5 || e.previewOptions == 7 || e.previewOptions == 7)
                console.log(optionsIndex)
                // if (optionsIndex >= 0) {
                //     this.optionsIndex = optionsIndex
                // }
                this.optionsIndex = optionsIndex
                break;
        }

    }

    renderInfo() {
        var data = [
            [], [], []
        ]
        this.data.options.map((items, index) => {
            switch (items.type) {
                case 0:
                    data[0].push(items)
                    break;
                case 1:
                    data[1].push(items)
                    break;
                case 2:
                    data[2].push(items)
                    break;
            }
        })
        console.log(data)
        return data.map((items, index) => {
            return (
                <View style={{ flex: 1 }}>
                    {items.map((item, i) => {
                        return (
                            <View style={{ marginBottom: 10 }}>
                                <Text style={{ fontSize: 15, color: colors.buttonColor }}>
                                    {this.store.languageHandler(this.lang, item) + ':   ' + this.dataHandler(index, item)}
                                </Text>
                            </View>
                        )
                    })}
                </View>
            )
        })
    }
    renderPreviewAndSelectOptions() {
        return (

            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', }}>
                {this.data.options.map((items, index) => {
                    const previewType = items.previewOptions

                    if (items.type == 2 && items != null && items.selections.length > 0) {
                        console.log(items)
                        switch (this.index) {
                            case 0:
                                console.log(previewType)
                                if (previewType == 1 || previewType == 3 || previewType == 5 || previewType == 7) {

                                    if (items.selections[items.index].hasOwnProperty('imagePreviewURL'))
                                        return (
                                            <Image style={{ position: 'absolute', width: 400, height: 400 }} source={{ uri: items.selections[items.index].imagePreviewURL }} />
                                        )
                                }
                                break;
                            case 1:
                                if (previewType == 2 || previewType == 3 || previewType == 6 || previewType == 7) {
                                    if (previewType == 2 || previewType == 6) {
                                        if (items.selections[items.index].hasOwnProperty('imagePreviewURL')) {
                                            return (
                                                <Image style={{ position: 'absolute', width: 400, height: 400 }} source={{ uri: items.selections[items.index].imagePreviewURL }} />
                                            )
                                        }
                                    }
                                    else if (previewType == 3 || previewType == 7) {

                                        if (items.selections[items.index].hasOwnProperty('imagePreview2URL')) {
                                            console.log(items.name + " : " + items.selections[items.index].imagePreview2URL)
                                            return (
                                                <Image style={{ position: 'absolute', width: 400, height: 400 }} source={{ uri: items.selections[items.index].imagePreview2URL }} />
                                            )
                                        }
                                    }
                                }
                                break;
                            case 2: if (previewType == 4 || previewType == 5 || previewType == 6, previewType == 7) {

                                if (previewType == 4) {
                                    if (items.selections[items.index].hasOwnProperty('imagePreviewURL')) {
                                        return (
                                            <Image style={{ position: 'absolute', width: 400, height: 400 }} source={{ uri: items.selections[items.index].imagePreviewURL }} />
                                        )
                                    }
                                } else if (previewType == 5 || previewType == 6) {
                                    if (items.selections[items.index].hasOwnProperty('imagePreview2URL')) {
                                        return (
                                            <Image style={{ position: 'absolute', width: 400, height: 400 }} source={{ uri: items.selections[items.index].imagePreview2URL }} />
                                        )
                                    }
                                } else if (previewType == 7) {
                                    if (items.selections[items.index].hasOwnProperty('imagePreview3URL')) {
                                        return (
                                            <Image style={{ position: 'absolute', width: 400, height: 400 }} source={{ uri: items.selections[items.index].imagePreview3URL }} />
                                        )
                                    }
                                }


                            }
                                break;
                        }

                    }
                })}

            </View>

        )
    }

    dataHandler(index, data) {
        switch (index) {
            case 0:
                if (data.valueType == 2) {
                    return this.store.languageHandler(this.lang, data.selections[data.selections.findIndex(e => e.id == parseInt(data.value))])
                } else {
                    return data.value
                }
                break;
            case 1:
                return data.value + " " + this.store.languageHandler(this.lang, data.unit)
                break;
            case 2:
                return this.store.languageHandler(this.lang, data.selections[data.selections.findIndex(e => e.id == parseInt(data.value))])
                break;
        }
    }

    confirmAction() {
        this.store.orderData.push(_.clone(this.data))
        this.props.navigation.navigate('Confirm')
        console.log(this.store.orderData)
    }

    render() {
        return (
            <SafeAreaView
                style={{
                    flex: 1,
                    backgroundColor: 'white',
                }}>
                <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' }}>
                        {this.isOrder ? (<View style={{ alignItems: 'center', justifyContent: 'center', }}>
                            <Text style={{ fontSize: 25, color: colors.buttonColor, marginTop: 20, fontWeight: '600' }}>
                                {this.store.text.confirmStyleSize}
                            </Text>
                            <Text style={{ fontSize: 20, color: colors.buttonColor, marginTop: 20, fontWeight: '600' }}>
                                {this.store.languageHandler(this.lang, this.data)}
                            </Text>
                        </View>) : (<Text style={{ fontSize: 25, color: colors.buttonColor, marginTop: 20, fontWeight: '600' }}>
                            {this.store.languageHandler(this.lang, this.data)}
                        </Text>)}

                        <View style={{ flex: 1, flexDirection: 'row', marginTop: 20 }}>
                            <View style={{ flex: 0.35, alignItems: 'center', }}>
                                <View style={{ flexDirection: 'row' }}>
                                    <TouchableOpacity style={{ width: 100, height: 50, borderBottomColor: colors.buttonColor, borderBottomWidth: this.index == 0 ? 2 : 0, justifyContent: 'center', alignItems: 'center' }}
                                        onPress={() => this.sideClickAction(0)}>
                                        <Text style={{ fontWeight: '800', color: colors.buttonColor }}>
                                            {this.store.text.front}
                                        </Text>
                                    </TouchableOpacity>
                                    <TouchableOpacity style={{ width: 100, height: 50, borderBottomColor: colors.buttonColor, borderBottomWidth: this.index == 1 ? 2 : 0, justifyContent: 'center', alignItems: 'center' }}
                                        onPress={() => this.sideClickAction(1)}>
                                        <Text style={{ fontWeight: '800', color: colors.buttonColor }}>
                                            {this.store.text.back}
                                        </Text>
                                    </TouchableOpacity>
                                    <TouchableOpacity style={{ width: 100, height: 50, borderBottomColor: colors.buttonColor, borderBottomWidth: this.index == 2 ? 2 : 0, justifyContent: 'center', alignItems: 'center' }}
                                        onPress={() => this.sideClickAction(2)}>
                                        <Text style={{ fontWeight: '800', color: colors.buttonColor }}>
                                            {this.store.text.side}
                                        </Text>
                                    </TouchableOpacity>
                                </View>
                                <View style={{ marginTop: 20, alignItems: 'center' }}>


                                    {this.renderPreviewAndSelectOptions()}
                                </View>
                            </View>
                            <View style={{ flex: 0.65, }}>
                                <ScrollView>
                                    <View style={{ flex: 1, flexDirection: 'row' }}>
                                        {this.renderInfo()}
                                    </View>
                                    {this.isOrder ? (<View style={{ flex: 1, flexDirection: 'row', marginTop: 20 }}>
                                        <View style={{ flex: 0.5, alignItems: 'center' }}>
                                            <TouchableOpacity style={{ width: 130, height: 130, borderRadius: 10, borderWidth: 1, borderColor: colors.buttonColor, justifyContent: 'center', alignItems: 'center' }}
                                                onPress={() => this.getPhoto(true)}>
                                                {this.data.frontImage == null ? (<Icon name='image' size={70} />) : (<Image style={{ width: 130, height: 130, borderRadius: 10 }} source={{ uri: this.data.frontImage.uri }} />)}

                                            </TouchableOpacity>
                                            <Text style={{ fontSize: 20, color: colors.buttonColor, marginTop: 10 }}>
                                                {this.store.text.frontphoto}
                                            </Text>
                                        </View>
                                        <View style={{ flex: 0.5, alignItems: 'center' }}>
                                            <TouchableOpacity style={{ width: 130, height: 130, borderRadius: 10, borderWidth: 1, borderColor: colors.buttonColor, justifyContent: 'center', alignItems: 'center' }}
                                                onPress={() => this.getPhoto(false)}>
                                                {this.data.backImage == null ? (<Icon name='image' size={70} />) : (<Image style={{ width: 130, height: 130, borderRadius: 10 }} source={{ uri: this.data.backImage.uri }} />)}
                                            </TouchableOpacity>
                                            <Text style={{ fontSize: 20, color: colors.buttonColor, marginTop: 10 }}>
                                                {this.store.text.backPhoto}
                                            </Text>
                                        </View>
                                    </View>) : (<View style={{ flex: 1, flexDirection: 'row', marginTop: 20 }}>
                                        <View style={{ flex: 0.5, alignItems: 'center' }}>
                                            {this.data.hasOwnProperty('imageFrontURL') ? (<Image style={{ width: 130, height: 130, borderRadius: 10 }} source={{ uri: this.data.imageFrontURL }} />) : (<View />)}
                                        </View>
                                        <View style={{ flex: 0.5, alignItems: 'center' }}>
                                            {this.data.hasOwnProperty('imageBackURL') ? (<Image style={{ width: 130, height: 130, borderRadius: 10 }} source={{ uri: this.data.imageBackURL }} />) : (<View />)}
                                        </View>
                                    </View>)}

                                </ScrollView>

                            </View>
                        </View>

                    </View>

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


                        <Setting self={this} settingViewAble={this.settingViewAble} onPress={() => { this.settingViewAble = !this.settingViewAble }} />
                        {this.isOrder ? (<View style={{ position: 'absolute', flexDirection: 'row' }}>
                            <View style={{ marginRight: 20 }}>
                                <CustomLoginButton width={6} title={'Back to edit'} onPress={() => { this.props.navigation.goBack() }} />
                            </View>

                            <CustomLoginButton width={6} title={'Confirm'} onPress={() => { this.confirmAction() }} />
                        </View>) : (<View />)}

                    </View>

                </View>
            </SafeAreaView>
        );
    }
}))
export default ConfirmSuit
