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";
import { SheetHeaderItem } from "@/components/atom/SheetHeaderItem";

const versionCode = "6.1.6.2"; // Update this version code as needed

export const SettingTopPage = ({
  testNFC,
  startPage,
  setStartPage,
  updateAndReload,
}) => {
  const { width } = useWindowDimensions();
  const { expoPushToken } = useNotification();
  const navigation = useNavigation();
  return (
    <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
      <SheetHeaderItem title="アプリの設定画面" LeftItem={{
        title: "閉じる",
        onPress: () => navigation.goBack(),
      }} />
      <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={"列車位置情報"}
          />
          <SettingList
            string="お気に入り登録の並び替え"
            onPress={() =>
              navigation.navigate("setting", { screen: "FavoriteSettings" })
            }
          />
          <SettingList
            string={`通知設定${
              expoPushToken == "" ? "(通知設定をオンにしてください)" : "(β)"
            }`}
            onPress={() =>
              navigation.navigate("setting", { screen: "NotificationSettings" })
            }
            disabled={expoPushToken == ""}
          />

          <SettingList
            string="レイアウト設定"
            onPress={() =>
              navigation.navigate("setting", { screen: "LayoutSettings" })
            }
          />
          {Platform.OS === "android" ? (
            <SettingList
              string="ウィジェット設定"
              onPress={() =>
                navigation.navigate("setting", { screen: "WidgetSettings" })
              }
            />
          ) : null}
          <SettingList
            string="アイコン設定"
            onPress={() =>
              navigation.navigate("setting", { screen: "LauncherIconSettings" })
            }
          />
          <SettingList
            string="プライバシーポリシー"
            onPress={() =>
              Linking.openURL(
                "https://nexcloud.haruk.in/sites/press-harukin/JRShikokuApps/policy"
              )
            }
          />

          <SettingList
            string="開発情報"
            onPress={() =>
              Linking.openURL("https://nexcloud.haruk.in/s/2WFEN5oLPGtrRqT")
            }
          />

          <SettingList
            string="運営Twitter"
            onPress={() => Linking.openURL("https://twitter.com/Xprocess_main")}
          />

          {/* <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>
  );
};

const SettingList = ({ string, onPress, disabled }) => {
  return (
    <ListItem
      activeScale={0.95}
      Component={TouchableScale}
      bottomDivider
      onPress={onPress}
      disabled={disabled}
    >
      <ListItem.Content>
        <ListItem.Title>{string}</ListItem.Title>
      </ListItem.Content>
      <ListItem.Chevron />
    </ListItem>
  );
};