import React from "react";
import {
  View,
  Text,
  TouchableOpacity,
  ScrollView,
  Linking,
  Image,
  Platform,
} from "react-native";
import * as Updates from "expo-updates";
import { useWindowDimensions } from "react-native";
import { ListItem } from "native-base";

const versionCode = "5.4.1";

export const SettingTopPage = ({ navigate, testNFC, updateAndReload }) => {
  const { width } = useWindowDimensions();
  return (
    <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
      <View style={{ backgroundColor: "#0099CC", flexDirection: "row" }}>
        <View style={{ flex: 1 }}>
          <TouchableOpacity
            onPress={() => navigate("menu")}
            style={{
              flexDirection: "column",
              flex: 1,
            }}
          >
            <View style={{ flex: 1 }} />
            <Text
              style={{
                fontSize: 20,
                fontWeight: "bold",
                textAlign: "left",
                textAlignVertical: "center",
                color: "white",
                padding: 10,
              }}
            >
              閉じる
            </Text>
            <View style={{ flex: 1 }} />
          </TouchableOpacity>
        </View>

        <Text
          style={{
            fontSize: 20,
            fontWeight: "bold",
            textAlign: "center",
            color: "white",
            padding: 10,
          }}
        >
          アプリの設定画面
        </Text>
        <View style={{ flex: 1 }}></View>
      </View>
      <ScrollView style={{ flex: 1, backgroundColor: "#f8f8fc" }}>
        <View style={{ height: 300, padding: 10 }}>
          <View style={{ flex: 1 }} />
          <Image
            source={require("../../assets/Header.png")}
            style={{
              aspectRatio: 8.08,
              height: undefined,
              width: width - 20,
              borderRadius: 5,
            }}
          />
          <View style={{ flexDirection: "row", paddingTop: 10 }}>
            <View style={{ flex: 1 }} />
            <Text>内部バージョン: {versionCode}</Text>
            <View style={{ flex: 1 }} />
          </View>
          <View style={{ flexDirection: "row", paddingBottom: 10 }}>
            <View style={{ flex: 1 }} />
            <Text>ReleaseChannel: {Updates.channel}</Text>
            <View style={{ flex: 1 }} />
          </View>

          <View style={{ flex: 1 }} />
          <Text
            style={{
              fontSize: 14,
              fontStyle: "italic",
            }}
          >
            このアプリは、四国旅客鉄道株式会社の提供する列車走行位置表示システムを利用し、HARUKIN/Xprocessにより一部の機能を拡張したものです。
          </Text>
          <Text
            style={{
              fontSize: 14,
              fontStyle: "italic",
            }}
          >
            このアプリに関するお問い合わせは、HARUKIN/Xprocessにお願いします。くれぐれも四国旅客鉄道株式会社にはお問い合わせしないようにお願いします。
          </Text>
        </View>

        <View style={{ flex: 1, borderTopWidth: 1, borderColor: "gray" }}>
          <ListItem
            style={{ flexDirection: "row" }}
            onPress={() => navigate("FavoriteSettings")}
          >
            <Text
              style={{
                fontSize: 20,
                alignItems: "center",
                alignContent: "center",
                textAlign: "center",
                textAlignVertical: "center",
              }}
            >
              お気に入り登録の並び替え
            </Text>
            <View style={{ flex: 1 }} />
            <Text
              style={{
                fontSize: 20,
                alignItems: "center",
                alignContent: "center",
                textAlign: "center",
                textAlignVertical: "center",
              }}
            >
              {">"}
            </Text>
          </ListItem>
          <ListItem
            style={{ flexDirection: "row" }}
            onPress={() => navigate("LayoutSettings")}
          >
            <Text
              style={{
                fontSize: 20,
                alignItems: "center",
                alignContent: "center",
                textAlign: "center",
                textAlignVertical: "center",
              }}
            >
              レイアウト設定
            </Text>
            <View style={{ flex: 1 }} />
            <Text
              style={{
                fontSize: 20,
                alignItems: "center",
                alignContent: "center",
                textAlign: "center",
                textAlignVertical: "center",
              }}
            >
              {">"}
            </Text>
          </ListItem>
          {Platform.OS === "android" ? (
            <ListItem
              style={{ flexDirection: "row" }}
              onPress={() => navigate("WidgetSettings")}
            >
              <Text
                style={{
                  fontSize: 20,
                  alignItems: "center",
                  alignContent: "center",
                  textAlign: "center",
                  textAlignVertical: "center",
                }}
              >
                ウィジェット設定
              </Text>
              <View style={{ flex: 1 }} />
              <Text
                style={{
                  fontSize: 20,
                  alignItems: "center",
                  alignContent: "center",
                  textAlign: "center",
                  textAlignVertical: "center",
                }}
              >
                {">"}
              </Text>
            </ListItem>
          ) : null}
          <ListItem
            style={{ flexDirection: "row" }}
            onPress={() =>
              Linking.openURL(
                "https://nexcloud.haruk.in/sites/press-harukin/JRShikokuApps/policy"
              )
            }
          >
            <Text
              style={{
                fontSize: 20,
                alignItems: "center",
                alignContent: "center",
                textAlign: "center",
                textAlignVertical: "center",
              }}
            >
              プライバシーポリシー
            </Text>
            <View style={{ flex: 1 }} />
          </ListItem>
          <ListItem
            style={{ flexDirection: "row" }}
            onPress={() =>
              Linking.openURL("https://nexcloud.haruk.in/s/2WFEN5oLPGtrRqT")
            }
          >
            <Text
              style={{
                fontSize: 20,
                alignItems: "center",
                alignContent: "center",
                textAlign: "center",
                textAlignVertical: "center",
              }}
            >
              開発情報
            </Text>

            <View style={{ flex: 1 }} />
          </ListItem>
          <ListItem
            style={{ flexDirection: "row" }}
            onPress={() => Linking.openURL("https://twitter.com/Xprocess_main")}
          >
            <Text
              style={{
                fontSize: 20,
                alignItems: "center",
                alignContent: "center",
                textAlign: "center",
                textAlignVertical: "center",
              }}
            >
              運営Twitter
            </Text>
            <View style={{ flex: 1 }} />
          </ListItem>
          {/* <ListItem style={{ flexDirection: "row" }} onPress={() => testNFC()}>
            <Text
              style={{
                fontSize: 20,
                alignItems: "center",
                alignContent: "center",
                textAlign: "center",
                textAlignVertical: "center",
              }}
            >
              testNFC
            </Text>
            <View style={{ flex: 1 }} />
          </ListItem> */}
        </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>
  );
};