import Styles from "@/constants/Styles";
import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
import { router } from "expo-router";
import { useState } from "react";
import { Text, ToastAndroid, View } from "react-native";
import AlertKonfirmasi from "./alertKonfirmasi";
import DrawerBottom from "./drawerBottom";
import ItemSectionTanggalTugas from "./itemSectionTanggalTugas";
import MenuItemRow from "./menuItemRow";
import ModalSelect from "./modalSelect";

type Props = {
   category: 'project' | 'task'
}

export default function SectionTanggalTugas({ category }: Props) {
   const [isModal, setModal] = useState(false)
   const [isSelect, setSelect] = useState(false)
   const [choose, setChoose] = useState({ val: '', label: '' })

   return (
      <>
         <View style={[Styles.mb15, Styles.mt10]}>
            <Text style={[Styles.textDefaultSemiBold, Styles.mv05]}>Tanggal & Tugas</Text>
            <View style={[Styles.wrapPaper]}>
               <ItemSectionTanggalTugas done={false} title="Pertama" dateStart="12-03-2023" dateEnd="15-03-2023" onPress={() => { setModal(true) }} />
               <ItemSectionTanggalTugas done={true} title="Kedua" dateStart="15-03-2023" dateEnd="20-03-2023" onPress={() => { setModal(true) }} />
            </View>
         </View>

         <DrawerBottom animation="slide" isVisible={isModal} setVisible={setModal} title="Menu">
            <View style={Styles.rowItemsCenter}>
               <MenuItemRow
                  icon={<MaterialCommunityIcons name="list-status" color="black" size={25} />}
                  title="Update Status"
                  onPress={() => {
                     setModal(false)
                     setSelect(true)
                  }}
               />
               <MenuItemRow
                  icon={<MaterialCommunityIcons name="pencil-outline" color="black" size={25} />}
                  title="Edit Tugas"
                  onPress={() => {
                     setModal(false)
                     category == 'project'
                        ? router.push(`/project/update/124`)
                        : router.push(`./update/124`)
                  }}
               />

               <MenuItemRow
                  icon={<Ionicons name="trash" color="black" size={25} />}
                  title="Hapus Tugas"
                  onPress={() => {
                     AlertKonfirmasi({
                        title: 'Konfirmasi',
                        desc: 'Apakah anda yakin ingin menghapus data ini?',
                        onPress: () => {
                           setModal(false)
                           ToastAndroid.show('Berhasil menghapus data', ToastAndroid.SHORT)
                        }
                     })

                  }}
               />
            </View>
         </DrawerBottom>

         <ModalSelect
            category="status-task"
            close={setSelect}
            onSelect={(value) => {
               setChoose(value)
               setSelect(false)
               ToastAndroid.show('Berhasil mengubah data', ToastAndroid.SHORT)
            }}
            title="Status"
            choose={choose.val}
            open={isSelect}
         />
      </>
   )
}