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 { 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 { useSelector } from "react-redux"

export default function BannerList() {
   const [isModal, setModal] = useState(false)
   const entities = useSelector((state: any) => state.banner)
   const [dataId, setDataId] = useState('')
   const [dataStorage, setDataStorage] = useState('')

   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)
                        setDataStorage(index.image)
                        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: () => {
                           setModal(false)
                           ToastAndroid.show('Berhasil menghapus data', ToastAndroid.SHORT)
                        }
                     })
                  }}
               />
            </View>
         </DrawerBottom>
      </SafeAreaView>
   )
}