import React, { useState } from "react";
import {
  View,
  Text,
  TouchableOpacity,
  ScrollView,
  Image,
  ToastAndroid,
  Platform,
} from "react-native";
import { useNavigation } from "@react-navigation/native";
import * as Updates from "expo-updates";
import { AS } from "../../storageControl";
import icons from "../../assets/icons/icons";
import { setAlternateAppIcon, getAppIconName } from "expo-alternate-app-icons";
import { widthPercentageToDP } from "react-native-responsive-screen";
import { SheetHeaderItem } from "../atom/SheetHeaderItem";

export const LauncherIconSettings = ({ navigate }) => {
  const { goBack } = useNavigation();
  const [iconList] = useState(icons());
  const [currentIcon] = useState(getAppIconName());
  return (
    <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
      <SheetHeaderItem title="アイコン設定" LeftItem={{ title: "＜ 設定", onPress: goBack }} />
      <ScrollView style={{ flex: 1, backgroundColor: "white" }}>
        {currentIcon ? (
          <>
            <Text
              style={{
                backgroundColor: "#DDDDDD",
              }}
            >
              現在のアイコン:
              {iconList.filter(({ id }) => id == currentIcon)[0].id}
            </Text>

            <View
              style={{
                flexDirection: "cokumn",
                alignItems: "center",
                justifyContent: "center",
                backgroundColor: "#DDDDDD",
                padding: 10,
              }}
            >
              <Image
                source={iconList.filter(({ id }) => id == currentIcon)[0].icon}
                style={{
                  width: 50,
                  height: 50,
                  padding: 30,
                  borderWidth: 1,
                  borderRadius: 10,
                  borderColor: "white",
                  margin: 10,
                  backgroundColor: "white",
                }}
              />
              <Text>JR四国非公式アプリ</Text>
            </View>
          </>
        ) : (
          <></>
        )}
        <View
          style={{
            flexDirection: "row",
            flexWrap: "wrap",
            alignContent: "center",
            justifyContent: "center",
          }}
        >
          {iconList.map(({ name, icon, id }) => {
            return (
              <TouchableOpacity
                key={id}
                style={{
                  margin: 10,
                  alignItems: "center",
                  justifyContent: "center",
                  width: widthPercentageToDP("30%"),
                  maxWidth: 60,
                  height: 100,

                  borderColor: "#999999",
                  borderWidth: id == currentIcon ? 2 : 0,
                  borderRadius: 10,
                }}
                onPress={() => {
                  setAlternateAppIcon(id)
                    .then((res) => {
                      AS.setItem("isSetIcon", "true");
                      if (Platform.OS === "android") {
                        ToastAndroid.show(
                          "アイコンを変更しました。アプリを再起動します。",
                          ToastAndroid.SHORT
                        );
                      } else if (Platform.OS === "ios") {
                        Updates.reloadAsync();
                      }
                    })
                    .catch((err) => {
                      alert(err);
                    });
                }}
              >
                <Image source={icon} style={{ width: 50, height: 50 }} />
                <Text>{id}</Text>
              </TouchableOpacity>
            );
          })}
        </View>
      </ScrollView>
    </View>
  );
};