import React from "react";
import {
  View,
  Text,
  TouchableOpacity,
  ScrollView,
  Linking,
} from "react-native";
import * as Updates from "expo-updates";
import { SwitchArea } from "../atom/SwitchArea";

export const SettingTopPage = ({
  navigate,
  iconSetting,
  setIconSetting,
  mapSwitch,
  setMapSwitch,
  stationMenu,
  setStationMenu,
  usePDFView,
  setUsePDFView,
  trainMenu,
  setTrainMenu,
  trainPosition,
  setTrainPosition,
  testNFC,
  updateAndReload,
}) => {
  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.2.1
            </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>
  );
};