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 LayoutSettings = ({
  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("settingTopPage")}
            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: "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}
          />
          <TouchableOpacity
            style={{ flexDirection: "row", padding: 10 }}
            onPress={testNFC}
          >
            <Text
              style={{
                fontSize: 25,
                alignItems: "center",
                alignContent: "center",
                textAlign: "center",
                textAlignVertical: "center",
              }}
            >
              testNFC
            </Text>
            <View style={{ flex: 1 }} />
          </TouchableOpacity>
        </View>
      </ScrollView>
    </View>
  );
};