import React, { useState, useEffect, useLayoutEffect } from "react";
import {
  View,
  Text,
  TouchableOpacity,
  Linking,
  ScrollView,
  Image,
  useWindowDimensions,
  ToastAndroid,
  Platform
} from "react-native";
import { createStackNavigator } from "@react-navigation/stack";
import { TransitionPresets } from "@react-navigation/stack";
//import * as ExpoFelicaReader from "../../modules/expo-felica-reader/src";
import * as Updates from "expo-updates";
import { AS } from "../../storageControl";
import { Switch } from "react-native-elements";
import AutoHeightImage from "react-native-auto-height-image";
import { SettingTopPage } from "./SettingTopPage";
import { LayoutSettings } from "./LayoutSettings";
import { FavoriteSettings } from "./FavoriteSettings";
import { WidgetSettings } from "./WidgetSettings";
import { NotificationSettings } from "./NotificationSettings";
import { LauncherIconSettings } from "./LauncherIconSettings";

const Stack = createStackNavigator();
export default function Setting(props) {
  const {
    navigation: { navigate },
  } = props;
  const [iconSetting, setIconSetting] = useState(false);
  const [mapSwitch, setMapSwitch] = useState(false);
  const [stationMenu, setStationMenu] = useState(false);
  const [usePDFView, setUsePDFView] = useState(false);
  const [trainMenu, setTrainMenu] = useState(false);
  const [trainPosition, setTrainPosition] = useState(false);
  const [headerSize, setHeaderSize] = useState("default");
  const [startPage, setStartPage] = useState(false);
  const [uiSetting, setUiSetting] = useState("tokyo");
  useLayoutEffect(() => {
    AS.getItem("iconSwitch").then(setIconSetting);
    AS.getItem("mapSwitch").then(setMapSwitch);
    AS.getItem("stationSwitch").then(setStationMenu);
    AS.getItem("usePDFView").then(setUsePDFView);
    AS.getItem("trainSwitch").then(setTrainMenu);
    AS.getItem("trainPositionSwitch").then(setTrainPosition);
    AS.getItem("headerSize").then(setHeaderSize);
    AS.getItem("startPage").then(setStartPage);
    AS.getItem("uiSetting").then(setUiSetting);
  }, []);
  const testNFC = async () => {
    //const result = await ExpoFelicaReader.scan();
    //alert(result);
  };
  const updateAndReload = () => {
    Promise.all([
      AS.setItem("iconSwitch", iconSetting.toString()),
      AS.setItem("mapSwitch", mapSwitch.toString()),
      AS.setItem("stationSwitch", stationMenu.toString()),
      AS.setItem("usePDFView", usePDFView.toString()),
      AS.setItem("trainSwitch", trainMenu.toString()),
      AS.setItem("trainPositionSwitch", trainPosition.toString()),
      AS.setItem("headerSize", headerSize),
      AS.setItem("startPage", startPage.toString()),
      AS.setItem("uiSetting", uiSetting),
    ]).then(() => Updates.reloadAsync());
  };
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="settingTopPage"
        options={{
          gestureEnabled: false,
          ...TransitionPresets.SlideFromRightIOS,
          cardOverlayEnabled: true,
          headerTransparent: true,
          headerShown: false,
        }}
      >
        {(props) => (
          <SettingTopPage
            {...props}
            navigate={navigate}
            testNFC={testNFC}
            startPage={startPage}
            setStartPage={setStartPage}
            updateAndReload={updateAndReload}
          />
        )}
      </Stack.Screen>
      <Stack.Screen
        name="LayoutSettings"
        options={{
          gestureEnabled: true,
          ...TransitionPresets.SlideFromRightIOS,
          cardOverlayEnabled: true,
          headerTransparent: true,
          headerShown: false,
        }}
      >
        {(props) => (
          <LayoutSettings
            {...props}
            navigate={navigate}
            iconSetting={iconSetting}
            setIconSetting={setIconSetting}
            mapSwitch={mapSwitch}
            setMapSwitch={setMapSwitch}
            stationMenu={stationMenu}
            setStationMenu={setStationMenu}
            usePDFView={usePDFView}
            setUsePDFView={setUsePDFView}
            trainMenu={trainMenu}
            setTrainMenu={setTrainMenu}
            trainPosition={trainPosition}
            setTrainPosition={setTrainPosition}
            uiSetting={uiSetting}
            setUiSetting={setUiSetting}
            testNFC={testNFC}
            updateAndReload={updateAndReload}
            headerSize={headerSize}
            setHeaderSize={setHeaderSize}
          />
        )}
      </Stack.Screen>
      <Stack.Screen
        name="NotificationSettings"
        options={{
          //gestureEnabled: true,
          ...TransitionPresets.SlideFromRightIOS,
          cardOverlayEnabled: true,
          headerTransparent: true,
          headerShown: false,
        }}
      >
        {(props) => (
          <NotificationSettings
            {...props}
            navigate={navigate}
          />
        )}
      </Stack.Screen>
      {Platform.OS === 'android' && <Stack.Screen
        name="WidgetSettings"
        options={{
          gestureEnabled: true,
          ...TransitionPresets.SlideFromRightIOS,
          cardOverlayEnabled: true,
          headerTransparent: true,
          headerShown: false,
        }}
      >
        {(props) => <WidgetSettings {...props} navigate={navigate} />}
      </Stack.Screen>}
      <Stack.Screen
        name="LauncherIconSettings"
        options={{
          gestureEnabled: true,
          ...TransitionPresets.SlideFromRightIOS,
          cardOverlayEnabled: true,
          headerTransparent: true,
          headerShown: false,
        }}
      >
        {(props) => <LauncherIconSettings {...props} navigate={navigate} />}
      </Stack.Screen>
      <Stack.Screen
        name="FavoriteSettings"
        options={{
          gestureEnabled: true,
          ...TransitionPresets.SlideFromRightIOS,
          cardOverlayEnabled: true,
          headerTransparent: true,
          headerShown: false,
        }}
      >
        {(props) => <FavoriteSettings {...props} navigate={navigate} />}
      </Stack.Screen>
    </Stack.Navigator>
  );
}