import GuideOverlay from "@/components/GuideOverlay";
import ModalConfirmation from "@/components/ModalConfirmation";
import AppHeader from "@/components/AppHeader";
import { ButtonHeader } from "@/components/buttonHeader";
import HeaderRightDocument from "@/components/document/headerDocument";
import ItemFile from "@/components/document/itemFile";
import ModalMore from "@/components/document/modalMore";
import DrawerBottom from "@/components/drawerBottom";
import { InputForm } from "@/components/inputForm";
import MenuItemRow from "@/components/menuItemRow";
import ModalFloat from "@/components/modalFloat";
import ModalLoading from "@/components/modalLoading";
import ModalSelectMultiple from "@/components/modalSelectMultiple";
import Skeleton from "@/components/skeleton";
import Text from "@/components/Text";
import { ConstEnv } from "@/constants/ConstEnv";
import Styles from "@/constants/Styles";
import {
   apiDocumentDelete,
   apiDocumentRename,
   apiGetDivisionOneFeature,
   apiGetDocument,
   apiShareDocument,
} from "@/lib/api";
import { setUpdateDokumen } from "@/lib/dokumenUpdate";
import { GUIDE_DIVISION_DOCUMENT } from "@/lib/guideSteps";
import { useGuide } from "@/lib/useGuide";
import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import {
   AntDesign,
   MaterialCommunityIcons,
   MaterialIcons,
} from "@expo/vector-icons";
import * as FileSystem from 'expo-file-system';
import { startActivityAsync } from 'expo-intent-launcher';
import { router, Stack, useLocalSearchParams } from "expo-router";
import * as Sharing from 'expo-sharing';
import { useEffect, useState } from "react";
import {
   Alert,
   Platform,
   Pressable,
   RefreshControl,
   SafeAreaView,
   ScrollView,
   View
} from "react-native";
import * as mime from 'react-native-mime-types';
import Toast from "react-native-toast-message";
import { useDispatch, useSelector } from "react-redux";

type Props = {
   id: string;
   category: string;
   name: string;
   extension: string;
   idStorage: string;
   path: string;
   createdBy: string;
   share: boolean;
   createdAt: string;
   updatedAt: string;
};

type PropsPath = {
   id: string;
   name: string;
};

export default function DocumentDivision() {
   const { colors } = useTheme();
   const [loadingRename, setLoadingRename] = useState(false)
   const [isShare, setShare] = useState(false)
   const { token, decryptToken } = useAuthSession()
   const { id } = useLocalSearchParams<{ id: string }>()
   const [path, setPath] = useState("home")
   const [data, setData] = useState<Props[]>([])
   const [dataJalur, setDataJalur] = useState<PropsPath[]>([])
   const [dariSelectAll, setDariSelectAll] = useState(false)
   const [selectedFiles, setSelectedFiles] = useState<any>([])
   const [selectAll, setSelectAll] = useState(false)
   const [shareSelected, setShareSelected] = useState(false)
   const [copyAllowed, setCopyAllowed] = useState(true)
   const [modalMore, setModalMore] = useState(false)
   const [isRename, setRename] = useState(false)
   const dispatch = useDispatch();
   const [loading, setLoading] = useState(true)
   const arrSkeleton = Array.from({ length: 3 })
   const update = useSelector((state: any) => state.dokumenUpdate)
   const [refreshing, setRefreshing] = useState(false)
   const [loadingOpen, setLoadingOpen] = useState(false)
   const [isMemberDivision, setIsMemberDivision] = useState(false)
   const entityUser = useSelector((state: any) => state.user)
   const [showDeleteModal, setShowDeleteModal] = useState(false)
   const { visible: guideVisible, dismiss: dismissGuide } = useGuide('division-document')
   const [bodyRename, setBodyRename] = useState({
      id: "",
      name: "",
      path: "",
      idDivision: id,
      extension: "",
   });

   async function handleCheckMember() {
      try {
         const hasil = await decryptToken(String(token?.current));
         const response = await apiGetDivisionOneFeature({
            id,
            user: hasil,
            cat: "check-member",
         });
         setIsMemberDivision(response.data);
      } catch (error) {
         console.error(error);
      }
   }

   useEffect(() => {
      handleCheckMember()
   }, [id])

   async function handleLoad(loading: boolean) {
      try {
         setLoading(loading)
         const hasil = await decryptToken(String(token?.current));
         const response = await apiGetDocument({
            user: hasil,
            path,
            division: id,
            category: "all",
         });
         setData(response.data);
         setDataJalur(response.jalur);
      } catch (error) {
         console.error(error);
      } finally {
         setLoading(false)
      }
   }

   const handleCheckboxChange = (index: number) => {
      setDariSelectAll(false);
      if (selectedFiles.some((i: any) => i.id == data[index].id)) {
         setSelectedFiles(
            selectedFiles.filter((i: any) => i.id != data[index].id)
         );
      } else {
         setSelectedFiles([
            ...selectedFiles,
            {
               id: data[index].id,
               name: data[index].name,
               path: data[index].path,
               extension: data[index].extension,
               category: data[index].category,
               share: data[index].share,
               idStorage: data[index].idStorage,
            },
         ]);
      }
   };

   function cek() {
      if (selectedFiles.length == data.length) {
         setSelectAll(true);
      } else {
         setSelectAll(false);
      }

      const shareSelected = selectedFiles.some((i: any) => i?.share == true);
      if (shareSelected) {
         setShareSelected(true);
      } else {
         setShareSelected(false);
      }

      const cek = selectedFiles.some((i: any) => i?.category == "FOLDER");
      if (cek || selectedFiles.length > 1) {
         setCopyAllowed(false);
      } else {
         setCopyAllowed(true);
      }
   }

   useEffect(() => {
      cek();
   }, [selectedFiles]);

   const handleSelectAll = () => {
      if (!selectAll) {
         setDariSelectAll(false);
         for (let index = 0; index < data.length; index++) {
            if (!selectedFiles.some((i: any) => i.id == data[index].id)) {
               const newArr = {
                  id: data[index].id,
                  name: data[index].name,
                  path: data[index].path,
                  extension: data[index].extension,
                  category: data[index].category,
                  share: data[index].share,
                  idStorage: data[index].idStorage,
               };
               setSelectedFiles((selectedFiles: any) => [...selectedFiles, newArr]);
            }
         }
      } else {
         setDariSelectAll(true);
         setSelectedFiles([]);
      }
   };

   const handleBatal = () => {
      setSelectedFiles([]);
      setSelectAll(false);
      setDariSelectAll(false);
   };

   function onChooseRename() {
      setBodyRename({
         ...bodyRename,
         id: selectedFiles[0].id,
         name: selectedFiles[0].name,
         path: selectedFiles[0].path,
         extension: selectedFiles[0].extension,
      });
      setRename(true);
   }

   async function handleRename() {
      try {
         setLoadingRename(true)
         const hasil = await decryptToken(String(token?.current));
         const response = await apiDocumentRename({ user: hasil, ...bodyRename });
         if (response.success) {
            Toast.show({ type: 'small', text1: 'Berhasil mengubah nama', })
            dispatch(setUpdateDokumen(!update));
            handleBatal();
         } else {
            Toast.show({ type: 'small', text1: response.message, })
         }
      } catch (error : any ) {
         console.error(error);
         const message = error?.response?.data?.message || "Gagal mengubah nama"

         Toast.show({ type: 'small', text1: message })
      } finally {
         setLoadingRename(false)
         setRename(false)
      }
   }

   async function handleDelete() {
      try {
         const hasil = await decryptToken(String(token?.current));
         const response = await apiDocumentDelete({
            user: hasil,
            data: selectedFiles,
         });
         if (response.success) {
            Toast.show({ type: 'small', text1: 'Berhasil menghapus', })
            dispatch(setUpdateDokumen(!update));
            handleBatal();
         } else {
            Toast.show({ type: 'small', text1: response.message, })
         }
      } catch (error : any ) {
         console.error(error);
         const message = error?.response?.data?.message || "Gagal menghapus"

         Toast.show({ type: 'small', text1: message })
      }
   }

   useEffect(() => {
      handleBatal();
      handleLoad(false)
   }, [update]);

   async function handleShare(selectedDivision: any[]) {
      try {
         const hasil = await decryptToken(String(token?.current));
         const response = await apiShareDocument({
            user: hasil,
            dataDivision: selectedDivision,
            dataItem: selectedFiles,
         });
         if (response.success) {
            Toast.show({ type: 'small', text1: 'Berhasil membagikan item', })
            dispatch(setUpdateDokumen(!update));
            handleBatal();
         } else {
            Toast.show({ type: 'small', text1: response.message, })
         }
      } catch (error : any ) {
         console.error(error);
         const message = error?.response?.data?.message || "Gagal membagikan"

         Toast.show({ type: 'small', text1: message })
      } finally {
         setShare(false);
      }
   }


   const openFile = (item: Props) => {
      if (Platform.OS == 'android') setLoadingOpen(true)
      let remoteUrl = ConstEnv.url_storage + '/files/' + item.idStorage;
      const fileName = item.name + '.' + item.extension;
      let localPath = `${FileSystem.documentDirectory}/${fileName}`;
      const mimeType = mime.lookup(fileName)

      FileSystem.downloadAsync(remoteUrl, localPath).then(async ({ uri }) => {
         const contentURL = await FileSystem.getContentUriAsync(uri);
         setLoadingOpen(false)
         try {
            if (Platform.OS == 'android') {
               await startActivityAsync(
                  'android.intent.action.VIEW',
                  {
                     data: contentURL,
                     flags: 1,
                     type: mimeType as string,
                  }
               );
            } else if (Platform.OS == 'ios') {
               Sharing.shareAsync(localPath);
            }
         } catch (error) {
            Alert.alert('INFO', 'Gagal membuka file, tidak ada aplikasi yang dapat membuka file ini');
         } finally {
            if (Platform.OS == 'android') setLoadingOpen(false)
         }
      });
   };

   const handleRefresh = async () => {
      setRefreshing(true)
      handleLoad(false)
      await new Promise(resolve => setTimeout(resolve, 2000));
      setRefreshing(false)
   };

   useEffect(() => {
      handleLoad(true);
   }, [path]);

   return (
      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
         <Stack.Screen
            options={{
               // headerLeft: () =>
               //    selectedFiles.length > 0 || dariSelectAll ? (
               //       <ButtonHeader
               //          item={<MaterialIcons name="close" size={20} color="white" />}
               //          onPress={() => {
               //             handleBatal();
               //          }}
               //       />
               //    ) : (
               //       <ButtonBackHeader
               //          onPress={() => {
               //             router.back();
               //          }}
               //       />
               //    ),
               headerTitle:
                  selectedFiles.length > 0 || dariSelectAll
                     ? `${selectedFiles.length} item terpilih`
                     : "Dokumen Divisi",
               headerTitleAlign: "center",
               // headerRight: () =>
               //    selectedFiles.length > 0 || dariSelectAll ? (
               //       <ButtonHeader
               //          item={
               //             <MaterialIcons name="checklist-rtl" size={20} color="white" />
               //          }
               //          onPress={() => {
               //             handleSelectAll();
               //          }}
               //       />
               //    ) : (
               //       <HeaderRightDocument path={path} isMember={isMemberDivision} />
               //    ),
               header: () => (
                  <AppHeader
                     title={
                        selectedFiles.length > 0 || dariSelectAll
                           ? `${selectedFiles.length} item terpilih`
                           : "Dokumen Divisi"
                     }
                     showBack={(selectedFiles.length > 0 || dariSelectAll) ? false : true}
                     left={
                        <ButtonHeader
                           item={<MaterialIcons name="close" size={25} color="white" />}
                           onPress={() => {
                              handleBatal();
                           }}
                        />
                     }
                     onPressLeft={() => {
                        (selectedFiles.length > 0 || dariSelectAll) ? handleBatal() : router.back();
                     }}
                     right={
                        selectedFiles.length > 0 || dariSelectAll ? (
                           <ButtonHeader
                              item={
                                 <MaterialIcons name="checklist-rtl" size={25} color="white" />
                              }
                              onPress={() => {
                                 handleSelectAll();
                              }}
                           />
                        ) : (
                           <HeaderRightDocument path={path} isMember={isMemberDivision} />
                        )
                     }
                  />
               )
            }}
         />
         <GuideOverlay visible={guideVisible} steps={GUIDE_DIVISION_DOCUMENT} onDismiss={dismissGuide} />
         <ModalLoading isVisible={loadingOpen} setVisible={setLoadingOpen} />
         <ScrollView
            refreshControl={
               <RefreshControl
                  refreshing={refreshing}
                  onRefresh={handleRefresh}
                  tintColor={colors.icon}
               />
            }>
            <View style={[Styles.p15, Styles.mb100]}>
               <View style={[Styles.rowItemsCenter]}>
                  {
                     dataJalur.map((item, index) => (
                        <Pressable
                           key={index}
                           style={[Styles.rowItemsCenter]}
                           onPress={() => {
                              setPath(item.id);
                           }}
                        >
                           {item.id != "home" && (
                              <AntDesign name="right" style={[Styles.mh05, Styles.mt02]} color={colors.text} />
                           )}
                           <Text style={{ color: colors.text }}> {item.name} </Text>
                        </Pressable>
                     ))
                  }
               </View>
               <View>
                  {
                     loading ?
                        arrSkeleton.map((item, index) => (
                           <Skeleton key={index} width={100} widthType="percent" height={50} borderRadius={10} />
                        ))
                        :
                        data.length > 0 ? (
                           data.map((item, index) => {
                              const isSelected = selectedFiles.some((i: any) => i?.id == item.id);
                              return (
                                 <ItemFile
                                    key={index}
                                    category={
                                       item.category == "FOLDER"
                                          ? item.share
                                             ? "folder-shared"
                                             : "folder"
                                          : item.share
                                             ? "file-shared"
                                             : "file"
                                    }
                                    title={
                                       item.category == "FOLDER"
                                          ? item.name
                                          : `${item.name}.${item.extension}`
                                    }
                                    dateTime={item.createdAt}
                                    canChecked={(entityUser.role != "user" && entityUser.role != "coadmin") || isMemberDivision}
                                    onChecked={() => {
                                       handleCheckboxChange(index);
                                    }}
                                    checked={isSelected}
                                    onPress={() => {
                                       if (item.category == "FOLDER" && selectedFiles.length == 0 && !dariSelectAll) {
                                          setPath(item.id);
                                       } else if (item.category == "FILE" && selectedFiles.length == 0 && !dariSelectAll) {
                                          openFile(item)
                                       }
                                    }}
                                 />
                              );
                           })
                        ) : (
                           <Text style={[Styles.textDefault, Styles.mt15, { textAlign: "center", color: colors.dimmed }]} >
                              Tidak ada dokumen
                           </Text>
                        )}
               </View>
            </View>
         </ScrollView>
         {(selectedFiles.length > 0 || dariSelectAll) && (
            <View style={[Styles.bottomMenuSelectDocument, { backgroundColor: colors.header }]}>
               <View style={[Styles.rowItemsCenter, { justifyContent: "center" }]}>
                  <MenuItemRow
                     icon={
                        <MaterialCommunityIcons
                           name="trash-can-outline"
                           color="white"
                           size={25}
                        />
                     }
                     title="Hapus"
                     onPress={() => {
                        setShowDeleteModal(true)
                     }}
                     column="many"
                     color="white"
                     disabled={selectedFiles.length == 0 || shareSelected}
                  />
                  <MenuItemRow
                     icon={
                        <MaterialCommunityIcons
                           name="pencil-outline"
                           color="white"
                           size={25}
                        />
                     }
                     title="Ganti Nama"
                     onPress={() => {
                        onChooseRename();
                     }}
                     column="many"
                     color="white"
                     disabled={selectedFiles.length != 1 || shareSelected}
                  />
                  <MenuItemRow
                     icon={
                        <MaterialCommunityIcons
                           name="share-variant-outline"
                           color="white"
                           size={25}
                        />
                     }
                     title="Bagikan"
                     onPress={() => {
                        setShare(true);
                     }}
                     column="many"
                     color="white"
                     disabled={selectedFiles.length != 1 || shareSelected}
                  />
                  <MenuItemRow
                     icon={
                        <MaterialCommunityIcons
                           name="dots-vertical"
                           color="white"
                           size={25}
                        />
                     }
                     title="Lainnya"
                     onPress={() => {
                        setModalMore(true);
                     }}
                     column="many"
                     color="white"
                     disabled={
                        selectedFiles.length == 1 ||
                           (selectedFiles.length > 0 && !shareSelected)
                           ? false
                           : true
                     }
                  />
               </View>
            </View>
         )}

         <DrawerBottom
            animation="slide"
            isVisible={modalMore}
            setVisible={() => { setModalMore(false) }}
            title=""
         >
            <ModalMore
               onClose={() => { setModalMore(false); }}
               data={selectedFiles}
               share={shareSelected}
            />
         </DrawerBottom>

         <ModalFloat
            title="Ganti Nama"
            isVisible={isRename}
            setVisible={() => { setRename(false) }}
            onSubmit={() => { handleRename() }}
            disableSubmit={bodyRename.name == "" || loadingRename}
         >
            <View>
               <InputForm
                  type="default"
                  placeholder="Nama File"
                  value={bodyRename.name}
                  onChange={(text) => {
                     setBodyRename({ ...bodyRename, name: text });
                  }}
               />
            </View>
         </ModalFloat>

         <ModalSelectMultiple
            choose="dinas"
            title="Bagikan"
            category="share-division"
            open={isShare}
            close={() => { setShare(false) }}
            onSelect={(value) => {
               handleShare(value)
            }}
            value={id}
            item={selectedFiles[0]?.id}
         />

         <ModalConfirmation
            visible={showDeleteModal}
            title="Konfirmasi"
            message="Apakah anda yakin ingin menghapus dokumen?"
            onConfirm={() => {
               setShowDeleteModal(false)
               handleDelete()
            }}
            onCancel={() => setShowDeleteModal(false)}
            confirmText="Hapus"
            cancelText="Batal"
         />
      </SafeAreaView>
   );
}
