import React from 'react';
var _ = require('lodash');
import { SafeAreaView, Text, Image, Alert, Linking, View, ScrollView } 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 { width, height } from '../../services/screen';
import CustomLoginButton from '../../components/customLoginButton'
import Setting from '../../components/setting'

import { getStatusBarHeight } from 'react-native-status-bar-height';

const Select = inject("appStore")(observer(class Select extends React.Component {

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

    }

    refreshPage() {
        window.location.reload(false);
    }

    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, justifyContent: 'center', alignItems: 'center' }}>
                        <ScrollView horizontal={true}>
                            {this.store.products.map((items, index) => {
                                return (
                                    <View style={{ flex: 1, alignItems: 'center', marginTop: 40 }}>
                                        <CustomLoginButton title={this.store.languageHandler(this.lang, items)} width={6} onPress={() => { this.props.navigation.navigate('SuitStyle', { data: JSON.parse(JSON.stringify(items)), edit: false }) }} />
                                        <Image style={{ marginTop: 50, width: 300, height: 300 }} source={{ uri: items.imageURL }} />
                                    </View>
                                )
                            })}
                        </ScrollView>

                    </View>

                    <View style={{ flex: 0.1, justifyContent: 'center', alignItems: 'center' }}>
                        <Setting settingViewAble={this.settingViewAble} self={this} onPress={() => { this.settingViewAble = !this.settingViewAble }} />
                    </View>

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