import React, { useState, useEffect } from "reactn";
import { Image, Pressable, Text, View } from "react-native";
import { FlatGrid } from "react-native-super-grid";

import { responsiveWidth } from "../actions/responsiveSizes.js";

import { Fonts, Palette, Style, gutters } from "../styles";
import { mainBorderRadius } from "../styles/Style";

import useLayoutType from "../hooks/useLayoutType.js";

const IconSelector = ({ onClose } = {}) => {
  const { isNative } = useLayoutType();

  const [currentIconIndex, setCurrentIconIndex] = useState(0);

  useEffect(() => {
    if (isNative) {
      // import("expo-dynamic-app-icon").then((module) => {
      //   getAppIcon = module.getAppIcon;

      //   const iconIndex = getAppIcon();
      //   setCurrentIconIndex(Number(iconIndex));
      // });
    }
  }, []);

  return (
    <FlatGrid
      ListHeaderComponent={
        <View>
          <Text
            style={{
              ...Fonts({ type: "title" }),
              textAlign: "center",
              marginBottom: gutters / 2,
            }}
          >
            Nouvelle icône
          </Text>
          <Text
            style={{
              ...Fonts({ type: "default" }),
              textAlign: "center",
              width: "60%",
              alignSelf: "center",
              marginBottom: gutters,
            }}
          >
            Modifiez l'icône de votre app, pour une expérience plus personnelle.
          </Text>
        </View>
      }
      itemDimension={responsiveWidth(45)}
      data={[
        require(`../../assets/alternateIcons/1.png`),
        require(`../../assets/alternateIcons/2.png`),
        require(`../../assets/alternateIcons/3.png`),
        require(`../../assets/alternateIcons/4.png`),
      ]}
      style={{ flex: 1, backgroundColor: Palette.darkPurple }}
      spacing={10}
      renderItem={({ item, index }) => {
        const isSelected = currentIconIndex === index + 1;

        return (
          <Pressable
            key={index}
            style={{
              width: "100%",
              height: responsiveWidth(45),
              ...Style.containerCenter,
              ...Style.defaultShadows,
            }}
            onPress={() => {
              // import("expo-dynamic-app-icon").then((module) => {
              //   setAppIcon = module.setAppIcon;

              //   setAppIcon((index + 1).toString());
              //   setCurrentIconIndex(index + 1);
              //   onClose?.();
              // });
            }}
          >
            <Image
              source={item}
              resizeMode="cover"
              style={{
                width: "90%",
                height: "90%",
                borderRadius: mainBorderRadius * 2,
                overflow: "hidden",
                ...(isSelected && {
                  borderColor: Palette.primary,
                  borderWidth: 2,
                }),
              }}
            />
          </Pressable>
        );
      }}
    />
  );
};

export default IconSelector;