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 { useNavigation } from "@react-navigation/native";
import { ListItem } from "@rneui/themed";
import TouchableScale from "react-native-touchable-scale";
import { SwitchArea } from "../atom/SwitchArea";
import { useNotification } from "../../stateBox/useNotifications";

const versionCode = "5.6.0.2";

export const SettingTopPage = ({
  testNFC,
  startPage,
  setStartPage,
  updateAndReload,
}) => {
  const { width } = useWindowDimensions();
  const { expoPushToken } = useNotification();
  const navigation = useNavigation();
  return (
    <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
      <View style={{ backgroundColor: "#0099CC", flexDirection: "row" }}>
        <View style={{ flex: 1 }}>
          <TouchableOpacity
            onPress={() => navigation.goBack()}
            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" }}>
          <SwitchArea
            str="起動時に表示する画面"
            bool={startPage}
            setBool={setStartPage}
            falseImage={require("../../assets/configuration/showSetting0.jpg")}
            trueImage={require("../../assets/configuration/showSetting1.jpg")}
            falseText={"リンクメニュー"}
            trueText={"列車位置情報"}
          />
          <ListItem
            activeScale={0.95}
            Component={TouchableScale}
            bottomDivider
            onPress={() =>
              navigation.navigate("setting", { screen: "FavoriteSettings" })
            }
          >
            <ListItem.Content>
              <ListItem.Title>お気に入り登録の並び替え</ListItem.Title>
            </ListItem.Content>
            <ListItem.Chevron />
          </ListItem>
          <ListItem
            activeScale={0.95}
            Component={TouchableScale}
            bottomDivider
            onPress={() =>
              navigation.navigate("setting", { screen: "NotificationSettings" })
            }
            disabled={expoPushToken == ""}
          >
            <ListItem.Content>
              <ListItem.Title>
                通知設定
                {expoPushToken == "" ? "(通知設定をオンにしてください)" : "(β)"}
              </ListItem.Title>
            </ListItem.Content>
            <ListItem.Chevron />
          </ListItem>

          <ListItem
            activeScale={0.95}
            Component={TouchableScale}
            bottomDivider
            onPress={() =>
              navigation.navigate("setting", { screen: "LayoutSettings" })
            }
          >
            <ListItem.Content>
              <ListItem.Title>レイアウト設定</ListItem.Title>
            </ListItem.Content>
            <ListItem.Chevron />
          </ListItem>
          {Platform.OS === "android" ? (
            <ListItem
              activeScale={0.95}
              Component={TouchableScale}
              bottomDivider
              onPress={() =>
                navigation.navigate("setting", { screen: "WidgetSettings" })
              }
            >
              <ListItem.Content>
                <ListItem.Title>ウィジェット設定</ListItem.Title>
              </ListItem.Content>
              <ListItem.Chevron />
            </ListItem>
          ) : null}
          <ListItem
            activeScale={0.95}
            Component={TouchableScale}
            bottomDivider
            onPress={() =>
              Linking.openURL(
                "https://nexcloud.haruk.in/sites/press-harukin/JRShikokuApps/policy"
              )
            }
          >
            <ListItem.Content>
              <ListItem.Title>プライバシーポリシー</ListItem.Title>
            </ListItem.Content>
            <ListItem.Chevron />
          </ListItem>

          <ListItem
            activeScale={0.95}
            Component={TouchableScale}
            bottomDivider
            onPress={() =>
              Linking.openURL("https://nexcloud.haruk.in/s/2WFEN5oLPGtrRqT")
            }
          >
            <ListItem.Content>
              <ListItem.Title>開発情報</ListItem.Title>
            </ListItem.Content>
            <ListItem.Chevron />
          </ListItem>

          <ListItem
            activeScale={0.95}
            Component={TouchableScale}
            bottomDivider
            onPress={() => Linking.openURL("https://twitter.com/Xprocess_main")}
          >
            <ListItem.Content>
              <ListItem.Title>運営Twitter</ListItem.Title>
            </ListItem.Content>
            <ListItem.Chevron />
          </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>
  );
};