import AlertKonfirmasi from "@/components/alertKonfirmasi"
import HeaderRightBannerList from "@/components/banner/headerBannerList"
import BorderBottomItem from "@/components/borderBottomItem"
import ButtonBackHeader from "@/components/buttonBackHeader"
import DrawerBottom from "@/components/drawerBottom"
import MenuItemRow from "@/components/menuItemRow"
import Styles from "@/constants/Styles"
import { apiDeleteBanner, apiGetBanner } from "@/lib/api"
import { setEntities } from "@/lib/bannerSlice"
import { useAuthSession } from "@/providers/AuthProvider"
import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons"
import { router, Stack } from "expo-router"
import { useState } from "react"
import { Image, SafeAreaView, ScrollView, ToastAndroid, View } from "react-native"
import { useDispatch, useSelector } from "react-redux"

export default function BannerList() {
   const { decryptToken, token } = useAuthSession();
   const [isModal, setModal] = useState(false)
   const entities = useSelector((state: any) => state.banner)
   const [dataId, setDataId] = useState('')
   const dispatch = useDispatch();

   const handleDeleteEntity = async () => {
      try {
         const hasil = await decryptToken(String(token?.current));
         const deletedEntity = await apiDeleteBanner({ user: hasil }, dataId);
         if (deletedEntity.success) {
            ToastAndroid.show("Berhasil menghapus data", ToastAndroid.SHORT);
            apiGetBanner({ user: hasil }).then((data) =>
               dispatch(setEntities(data.data))
            );
         } else {
            ToastAndroid.show('Gagal menghapus data', ToastAndroid.SHORT);
         }
      } catch (error) {
         console.error(error)
         ToastAndroid.show('Terjadi kesalahan', ToastAndroid.SHORT)
      } finally {
         setModal(false)
      }

   };

   return (
      <SafeAreaView>
         <Stack.Screen
            options={{
               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
               headerTitle: 'Banner',
               headerTitleAlign: 'center',
               headerRight: () => <HeaderRightBannerList />
            }}
         />

         <ScrollView>
            <View style={[Styles.p15, Styles.mb100]}>
               {entities.map((index: any, key: number) => (
                  <BorderBottomItem
                     key={key}
                     onPress={() => {
                        setDataId(index.id)
                        setModal(true)
                     }}
                     borderType="all"
                     icon={
                        <Image
                           source={{ uri: `https://wibu-storage.wibudev.com/api/files/${index.image}` }}
                           style={[Styles.imgListBanner]}
                        />
                     }
                     title={index.title}
                  />
               ))}
            </View>
         </ScrollView>

         <DrawerBottom animation="slide" isVisible={isModal} setVisible={setModal} title="Menu">
            <View style={Styles.rowItemsCenter}>
               <MenuItemRow
                  icon={<MaterialCommunityIcons name="pencil-outline" color="black" size={25} />}
                  title="Edit"
                  onPress={() => {
                     setModal(false)
                     router.push(`/banner/${dataId}`)
                  }}
               />
               <MenuItemRow
                  icon={<MaterialCommunityIcons name="file-eye" color="black" size={25} />}
                  title="Lihat File"
                  onPress={() => { }}
               />
               <MenuItemRow
                  icon={<Ionicons name="trash" color="black" size={25} />}
                  title="Hapus"
                  onPress={() => {
                     AlertKonfirmasi({
                        title: 'Konfirmasi',
                        desc: 'Apakah anda yakin ingin menghapus data?',
                        onPress: () => { handleDeleteEntity() }
                     })
                  }}
               />
            </View>
         </DrawerBottom>
      </SafeAreaView>
   )
}