jrshikoku/components/settings.js

import React, { useState, useEffect, useLayoutEffect } from "react";
import {
  View,
  Text,
  TouchableOpacity,
  Linking,
  ScrollView,
  Image,
  useWindowDimensions,
  ToastAndroid,
} from "react-native";
import * as ExpoFelicaReader from "../modules/expo-felica-reader/src";
import * as Updates from "expo-updates";
import StatusbarDetect from "../StatusbarDetect";
import { AS } from "../storageControl";
var Status = StatusbarDetect();
import { Switch } from "react-native-elements";
import AutoHeightImage from "react-native-auto-height-image";

export default function Setting(props) {
  const {
    navigation: { navigate },
  } = props;
  const [iconSetting, setIconSetting] = useState(false);
  const [mapSwitch, setMapSwitch] = useState(false);
  const [stationMenu, setStationMenu] = useState(false);
  const [usePDFView, setUsePDFView] = useState(false);
  const [trainMenu, setTrainMenu] = useState(false);
  const [trainPosition, setTrainPosition] = useState(false);
  useLayoutEffect(() => {
    AS.getItem("iconSwitch").then(setIconSetting);
    AS.getItem("mapSwitch").then(setMapSwitch);
    AS.getItem("stationSwitch").then(setStationMenu);
    AS.getItem("usePDFView").then(setUsePDFView);
    AS.getItem("trainSwitch").then(setTrainMenu);
    AS.getItem("trainPositionSwitch").then(setTrainPosition);
  }, []);
  const testNFC = async () => {
    const resulit = await ExpoFelicaReader.scan();
    alert(resulit);
  };
  const updateAndReload = () => {
    Promise.all([
      AS.setItem("iconSwitch", iconSetting.toString()),
      AS.setItem("mapSwitch", mapSwitch.toString()),
      AS.setItem("stationSwitch", stationMenu.toString()),
      AS.setItem("usePDFView", usePDFView.toString()),
      AS.setItem("trainSwitch", trainMenu.toString()),
      AS.setItem("trainPositionSwitch", trainPosition.toString()),
    ]).then(() => Updates.reloadAsync());
  };
  return (
    <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
      <View style={{ backgroundColor: "#0099CC", flexDirection: "row" }}>
        <View style={{ flex: 1 }}>
          <TouchableOpacity onPress={() => navigate("menu")}>
            <Text
              style={{
                fontSize: 30,
                fontWeight: "bold",
                textAlign: "left",
                color: "white",
                padding: 10,
              }}
            >
              閉じる
            </Text>
          </TouchableOpacity>
        </View>

        <Text
          style={{
            fontSize: 30,
            fontWeight: "bold",
            textAlign: "center",
            color: "white",
            padding: 10,
          }}
        >
          設定画面
        </Text>
        <View style={{ flex: 1 }}></View>
      </View>
      <ScrollView style={{ flex: 1, backgroundColor: "white" }}>
        <View style={{ flex: 1 }}>
          <SwitchArea
            str="列車アイコン表示"
            bool={iconSetting}
            setBool={setIconSetting}
            falseImage={require("../assets/configuration/icon_default.jpg")}
            trueImage={require("../assets/configuration/icon_original.jpg")}
            falseText={"本家文字"}
            trueText={"車種アイコン"}
          />
          <SwitchArea
            str="トップメニュー表示"
            bool={mapSwitch}
            setBool={setMapSwitch}
            falseImage={require("../assets/configuration/menu_default.jpg")}
            trueImage={require("../assets/configuration/menu_original.jpg")}
            falseText={"本家(文字＆路線リスト選択)"}
            trueText={"オリジナル(マップ＆お気に入り)"}
          />
          <SwitchArea
            str="駅メニュー表示"
            bool={stationMenu}
            setBool={setStationMenu}
            falseText={"本家(文字)"}
            trueText={"オリジナル(駅名標)"}
          />
          <SwitchArea
            str="時刻表PDFをアプリ外で表示"
            bool={usePDFView}
            setBool={setUsePDFView}
          />
          <SwitchArea
            str="列車メニュー"
            bool={trainMenu}
            setBool={setTrainMenu}
          />
          <SwitchArea
            str="列車現在位置表示(alpha)"
            bool={trainPosition}
            setBool={setTrainPosition}
          />
          <View style={{ flexDirection: "row", padding: 10 }}>
            <Text
              style={{
                fontSize: 25,
                alignItems: "center",
                alignContent: "center",
                textAlign: "center",
                textAlignVertical: "center",
              }}
            >
              内部バージョン: 5.0
            </Text>
            <View style={{ flex: 1 }} />
          </View>
          <TouchableOpacity
            style={{ flexDirection: "row", padding: 10 }}
            //onPress={testNFC}
          >
            <Text
              style={{
                fontSize: 25,
                alignItems: "center",
                alignContent: "center",
                textAlign: "center",
                textAlignVertical: "center",
              }}
            >
              releaseChannel: {Updates.channel}
            </Text>
            <View style={{ flex: 1 }} />
          </TouchableOpacity>
          <TouchableOpacity
            style={{ flexDirection: "row", padding: 10 }}
            onPress={() =>
              Linking.openURL(
                "https://nexcloud.haruk.in/sites/press-harukin/JRShikokuApps/policy"
              )
            }
          >
            <Text
              style={{
                fontSize: 25,
                alignItems: "center",
                alignContent: "center",
                textAlign: "center",
                textAlignVertical: "center",
              }}
            >
              プライバシーポリシー
            </Text>
            <View style={{ flex: 1 }} />
          </TouchableOpacity>
        </View>
      </ScrollView>
      <TouchableOpacity
        style={{
          padding: 10,
          flexDirection: "row",
          borderColor: "white",
          borderWidth: 1,
          margin: 10,
          borderRadius: 5,
          alignItems: "center",
        }}
        onPress={updateAndReload}
      >
        <View style={{ flex: 1 }} />
        <Text style={{ fontSize: 25, fontWeight: "bold", color: "white" }}>
          設定を保存して再読み込み
        </Text>
        <View style={{ flex: 1 }} />
      </TouchableOpacity>
    </View>
  );
}
const SimpleSwitch = ({
  bool,
  setBool,
  color,
  value,
  image = require("../assets/icons.png"),
  subText = "",
}) => {
  const { width } = useWindowDimensions();
  return (
    <View style={{ flex: 1 }}>
      <TouchableOpacity
        style={{
          backgroundColor: bool == value.toString() ? color : null,
          padding: 5,
          borderRadius: 5,
          margin: 10,
          alignItems: "center",
          justifyContent: "center",
          flexDirection: "row",
          flex: 1,
        }}
        onPress={() => setBool(value.toString())}
      >
        <Image
          source={image}
          style={{
            aspectRatio: 1,
            height: undefined,
            width: "100%",
            borderRadius: 5,
          }}
          resizeMethod="scale"
        />
      </TouchableOpacity>
      <Text
        style={{
          fontSize: 14,
          textAlign: "center",
          textAlignVertical: "center",
        }}
      >
        {subText}
      </Text>
    </View>
  );
};
const SwitchArea = ({
  str,
  bool,
  setBool,
  falseImage,
  trueImage,
  falseText,
  trueText,
}) => {
  return (
    <View style={{ flexDirection: "column", padding: 10 }}>
      <Text
        style={{
          fontSize: 25,
          alignItems: "center",
          alignContent: "center",
          textAlign: "center",
          textAlignVertical: "center",
        }}
      >
        {str}
      </Text>
      <View style={{ flexDirection: "row", padding: 10 }}>
        <SimpleSwitch
          bool={bool}
          setBool={setBool}
          color="red"
          value={false}
          image={falseImage}
          subText={falseText}
        />
        <SimpleSwitch
          bool={bool}
          setBool={setBool}
          color="red"
          value={true}
          image={trueImage}
          subText={trueText}
        />
      </View>
    </View>
  );
};