import React, { useState, useEffect } from "react";
import { View, Text, TouchableOpacity } from "react-native";
import * as Updates from "expo-updates";
import StatusbarDetect from "../StatusbarDetect";
import { AS } from "../storageControl";
var Status = StatusbarDetect();
import { Switch } from "react-native-elements";

export default function Setting(props) {
  const {
    navigation: { navigate },
  } = props;
  const [iconSetting, setIconSetting] = useState(undefined);
  const [mapSwitch, setMapSwitch] = useState(undefined);
  const [stationMenu, setStationMenu] = useState(undefined);
  const [trainMenu, setTrainMenu] = useState(undefined);
  const [trainPosition, setTrainPosition] = useState(undefined);
  useEffect(() => {
    AS.getItem("iconSwitch").then(setIconSetting);
    AS.getItem("mapSwitch").then(setMapSwitch);
    AS.getItem("stationSwitch").then(setStationMenu);
    AS.getItem("trainSwitch").then(setTrainMenu);
    AS.getItem("trainPositionSwitch").then(setTrainPosition);
  }, []);
  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 style={{ flexDirection: "row", padding: 10 }}>
            <Text
              style={{
                fontSize: 25,
                alignItems: "center",
                alignContent: "center",
                textAlign: "center",
                textAlignVertical: "center",
              }}
            >
              マップを表示する(beta)
            </Text>
            <View style={{ flex: 1 }} />
            <Switch
              value={mapSwitch == "true" ? true : false}
              color={mapSwitch == "true" ? "red" : null}
              onValueChange={(value) => setMapSwitch(value.toString())}
            />
          </View>
          <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={stationMenu == "true" ? true : false}
              color={stationMenu == "true" ? "red" : null}
              onValueChange={(value) => setStationMenu(value.toString())}
            />
          </View>
          <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={trainMenu == "true" ? true : false}
              color={trainMenu == "true" ? "red" : null}
              onValueChange={(value) => setTrainMenu(value.toString())}
            />
          </View>
          <View style={{ flexDirection: "row", padding: 10 }}>
            <Text
              style={{
                fontSize: 25,
                alignItems: "center",
                alignContent: "center",
                textAlign: "center",
                textAlignVertical: "center",
              }}
            >
              →列車現在位置表示(alpha)
            </Text>
            <View style={{ flex: 1 }} />
            <Switch
              value={trainPosition == "true" ? true : false}
              color={trainPosition == "true" ? "red" : null}
              onValueChange={(value) => setTrainPosition(value.toString())}
            />
          </View>
          <View style={{ flexDirection: "row", padding: 10 }}>
            <Text
              style={{
                fontSize: 25,
                alignItems: "center",
                alignContent: "center",
                textAlign: "center",
                textAlignVertical: "center",
              }}
            >
              内部バージョン: 4.5 beta-2
            </Text>
            <View style={{ flex: 1 }} />
          </View>
          <View style={{ flexDirection: "row", padding: 10 }}>
            <Text
              style={{
                fontSize: 25,
                alignItems: "center",
                alignContent: "center",
                textAlign: "center",
                textAlignVertical: "center",
              }}
            >
              releaseChannel: {Updates.releaseChannel}
            </Text>
            <View style={{ flex: 1 }} />
          </View>
        </View>
      </View>
      <TouchableOpacity
        style={{
          padding: 10,
          flexDirection: "row",
          borderColor: "white",
          borderWidth: 1,
          margin: 10,
          borderRadius: 5,
          alignItems: "center",
        }}
        onPress={() => {
          Promise.all([
            AS.setItem("iconSwitch", iconSetting.toString()),
            AS.setItem("mapSwitch", mapSwitch.toString()),
            AS.setItem("stationSwitch", stationMenu.toString()),
            AS.setItem("trainSwitch", trainMenu.toString()),
            AS.setItem("trainPositionSwitch", trainPosition.toString()),
          ]).then(() => {
            Updates.reloadAsync();
          });
        }}
      >
        <View style={{ flex: 1 }} />
        <Text style={{ fontSize: 25, fontWeight: "bold", color: "white" }}>
          設定を保存して再読み込み
        </Text>
        <View style={{ flex: 1 }} />
      </TouchableOpacity>
    </View>
  );
}