import React, { useState, useEffect } from 'react';
import {View,Text,TouchableOpacity } from 'react-native';
import * as Updates from 'expo-updates';
import StatusbarDetect from '../StatusbarDetect';
import AsyncStorage from '@react-native-async-storage/async-storage';
var Status = StatusbarDetect();
import { Switch } from 'react-native-elements';

export default function Setting(props){
    const { navigation: { navigate } } = props;
    const [iconSetting, setIconSetting] = useState(undefined)
    useEffect(()=>{
        AsyncStorage.getItem("iconSwitch").then( d =>{
            setIconSetting(d)
        })
    },[])
    console.log(iconSetting);
    return(
        <View style={{height:"100%",backgroundColor:"#0099CC"}}>
            <View style={{flex:1,backgroundColor:"white"}}>
                <View style={{backgroundColor:"#0099CC"}}>
                    <Text style={{fontSize:30,fontWeight:"bold",textAlign:"center",color:"white",padding:10}}>設定画面</Text>
                </View>
                <View style={{flex:1}} >
                    <View style={{flexDirection:"row",padding:10}}>
                        <Text style={{fontSize:25,alignItems:"center",alignContent:"center",textAlign:"center",textAlignVertical:"center"}}>列車アイコンを表示する</Text>
                        <View style={{flex:1}} />
                        <Switch value={iconSetting == "true" ? true : false} color={iconSetting == "true" ? "red": null} onValueChange={(value)=>setIconSetting(value.toString())}/>
                    </View>
                    
                </View>
            </View>
            <TouchableOpacity style={{padding:10,flexDirection:"row",borderColor:"white",borderWidth:1,margin:10,borderRadius:5,alignItems:"center"}} onPress={()=>{
                AsyncStorage.setItem("iconSwitch",iconSetting.toString()).then(()=>{
                    Updates.reloadAsync()
                })
                }}>
              <View style={{flex:1}} />
              <Text style={{fontSize:25,fontWeight:"bold",color:"white"}}>設定を保存して再読み込み</Text>
              <View style={{flex:1}} />
            </TouchableOpacity>
        </View>
    )
}