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"

export default function BannerList() {
   const [isModal, setModal] = useState(false)

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

         <ScrollView>
            <View style={[Styles.p15, Styles.mb100]}>
               <BorderBottomItem
                  onPress={() => { setModal(true) }}
                  borderType="all"
                  icon={
                     <Image
                        source={require("../../../assets/images/bg.png")}
                        style={[Styles.imgListBanner]}
                     />
                  }
                  title="Banner 1"
               />
               <BorderBottomItem
                  onPress={() => { setModal(true) }}
                  borderType="all"
                  icon={
                     <Image
                        source={require("../../../assets/images/bg.png")}
                        style={[Styles.imgListBanner]}
                     />
                  }
                  title="Banner 2"
               />
               <BorderBottomItem
                  onPress={() => { setModal(true) }}
                  borderType="all"
                  icon={
                     <Image
                        source={require("../../../assets/images/bg.png")}
                        style={[Styles.imgListBanner]}
                     />
                  }
                  title="Banner 3"
               />
            </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/784')
                  }}
               />
               <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>
   )
}