import { useContext, useGlobal } from "reactn";
import { ScrollView, Text, View, Image, Pressable } from "react-native";

import firebase, { arrayRemove } from "../config/firebase";

import { getFileNameFromURL } from "../helpers";
import { Fonts, Palette, Style, gutters } from "../styles";
import { icons } from "../assets";

import { WebViewContext } from "../providers/WebViewProvider";
import alert from "./Alert";

export default ({
  files = [],
  setFiles = null,
  documentID = null,
  collectionRef = null,
  containerStyle = {},
}) => {
  const [, setIsLoading] = useGlobal("_isLoading");
  const [, setTooltip] = useGlobal("_tooltip");

  const { setWebViewUrl } = useContext(WebViewContext);

  const onDeleteFile = async (url) => {
    alert(
      "Êtes-vous sûr ?",
      "Cette action est irréversible.",
      [
        {
          text: "Annuler",
          style: "cancel",
        },
        {
          text: "Confirmer",
          onPress: async () => {
            try {
              setIsLoading(true);

              setFiles(
                files.filter((file) => file !== url && file.uri !== url)
              );
              await firebase.storage().refFromURL(url).delete();

              if (documentID) {
                await collectionRef.doc(documentID).update({
                  files: arrayRemove(url),
                });
              }

              setTooltip({
                type: "success",
                text: "Fichier supprimé avec succès !",
              });
            } catch (error) {
              console.log(error);
            } finally {
              setIsLoading(false);
            }
          },
          style: "confirm",
        },
      ],
      { cancelable: false }
    );
  };

  if (files.length === 0) {
    return null;
  }

  return (
    <View>
      <ScrollView
        horizontal
        style={{ ...containerStyle }}
        showsHorizontalScrollIndicator={false}
      >
        {files.map((file, index) => {
          const uri = file.uri || file;

          return (
            <View
              key={index}
              style={[
                Style.containerItem,
                Style.containerRow,
                {
                  backgroundColor: Palette.transparentPrimary,
                  paddingVertical: gutters / 4,
                  paddingHorizontal: 20,
                  marginRight: 10,
                  maxWidth: files?.length > 1 ? 250 : 400,
                },
              ]}
            >
              <Text
                numberOfLines={1}
                style={Fonts({
                  type: "default",
                  color: Palette.white,
                  style: {
                    maxWidth: files?.length > 1 ? 100 : 200,
                    marginRight: 10,
                  },
                })}
              >
                {getFileNameFromURL({ url: uri })}
              </Text>

              {setFiles && (
                <Pressable onPress={() => onDeleteFile(uri)}>
                  <Image
                    source={icons.trash}
                    style={[Style.iconDefault, { marginRight: 5 }]}
                    resizeMode="contain"
                  />
                </Pressable>
              )}

              <Pressable onPress={() => setWebViewUrl(uri)}>
                <Image
                  source={icons.eye}
                  style={Style.iconDefault}
                  resizeMode="contain"
                />
              </Pressable>
            </View>
          );
        })}
      </ScrollView>
    </View>
  );
};