mobile-darmasaba/app/(application)/project/create.tsx

import BorderBottomItem from "@/components/borderBottomItem";
import ButtonBackHeader from "@/components/buttonBackHeader";
import ButtonSaveHeader from "@/components/buttonSaveHeader";
import ButtonSelect from "@/components/buttonSelect";
import ImageUser from "@/components/imageNew";
import { InputForm } from "@/components/inputForm";
import ModalSelect from "@/components/modalSelect";
import SectionListAddTask from "@/components/project/sectionListAddTask";
import SelectForm from "@/components/selectForm";
import Styles from "@/constants/Styles";
import { apiCreateProject } from "@/lib/api";
import { setMemberChoose } from "@/lib/memberChoose";
import { setUpdateProject } from "@/lib/projectUpdate";
import { setTaskCreate } from "@/lib/taskCreate";
import { useAuthSession } from "@/providers/AuthProvider";
import { router, Stack } from "expo-router";
import { useEffect, useState } from "react";
import {
   SafeAreaView,
   ScrollView,
   Text,
   ToastAndroid,
   View,
} from "react-native";
import { useDispatch, useSelector } from "react-redux";

export default function CreateProject() {
   const { token, decryptToken } = useAuthSession();
   const [chooseGroup, setChooseGroup] = useState({ val: "", label: "" });
   const dispatch = useDispatch();
   const [valSelect, setValSelect] = useState<"group" | "member">("group");
   const [isSelect, setSelect] = useState(false);
   const [valChoose, setValChoose] = useState("");
   const entitiesMember = useSelector((state: any) => state.memberChoose);
   const taskCreate = useSelector((state: any) => state.taskCreate);
   const update = useSelector((state: any) => state.projectUpdate)
   const [fileForm, setFileForm] = useState([])
   const [disableBtn, setDisableBtn] = useState(true)
   const [dataForm, setDataForm] = useState({
      idGroup: "",
      title: "",
   });
   const [error, setError] = useState({
      group: false,
      title: false,
      task: false,
      member: false,
   });
   const [hitung, setHitung] = useState(0)

   function validationForm(cat: string, val: any, label?: string) {
      if (cat == "group") {
         setChooseGroup({ val, label: String(label) });
         dispatch(setMemberChoose([]));
         setDataForm({ ...dataForm, idGroup: val });
         if (val == "" || val == "null") {
            setError(error => ({ ...error, group: true }))
         } else {
            setError(error => ({ ...error, group: false }))
         }
      } else if (cat == "title") {
         setDataForm({ ...dataForm, title: val });
         if (val == "" || val == "null") {
            setError(error => ({ ...error, title: true }))
         } else {
            setError(error => ({ ...error, title: false }))
         }
      } else if (cat == "task" && hitung > 1) {
         if (taskCreate.length == 0) {
            setError(error => ({ ...error, task: true }))
         } else {
            setError(error => ({ ...error, task: false }))
         }
      } else if (cat == "member") {
         if (entitiesMember.length == 0) {
            setError(error => ({ ...error, member: true }))
         } else {
            setError(error => ({ ...error, member: false }))
         }
      }

      setHitung(hitung => hitung + 1)
   }

   function handleBack() {
      dispatch(setTaskCreate([]));
      dispatch(setMemberChoose([]));
      router.back();
   }

   useEffect(() => {
      validationForm('task', '');
   }, [taskCreate]);

   async function handleCreate() {
      try {
         const hasil = await decryptToken(String(token?.current))
         const fd = new FormData()
         for (let i = 0; i < fileForm.length; i++) {
            fd.append(`file${i}`, fileForm[i]);
         }
         fd.append("data", JSON.stringify(
            { user: hasil, task: taskCreate, member: entitiesMember, ...dataForm }
         ))
         const response = await apiCreateProject(fd)
         if (response.success) {
            dispatch(setUpdateProject({ ...update, data: !update.data }))
            ToastAndroid.show('Berhasil menambahkan data', ToastAndroid.SHORT)
            handleBack()
         } else {
            ToastAndroid.show(response.message, ToastAndroid.SHORT)
         }
      } catch (error) {
         console.error(error)
      }
   }


   function checkForm() {
      if (Object.values(error).some((v) => v == true) == true || Object.values(dataForm).some((v) => v == "") == true || entitiesMember.length == 0 || taskCreate.length == 0) {
         setDisableBtn(true)
      } else {
         setDisableBtn(false)
      }
   }

   useEffect(() => {
      checkForm()
   }, [error, dataForm, entitiesMember, taskCreate])


   return (
      <SafeAreaView>
         <Stack.Screen
            options={{
               headerLeft: () => (
                  <ButtonBackHeader
                     onPress={() => {
                        handleBack();
                     }}
                  />
               ),
               headerTitle: "Tambah Kegiatan",
               headerTitleAlign: "center",
               headerRight: () => (
                  <ButtonSaveHeader 
                     disable={disableBtn}
                     category="create"
                     onPress={() => {
                        handleCreate()
                     }}
                  />
               ),
            }}
         />
         <ScrollView>
            <View style={[Styles.p15, Styles.mb100]}>
               <SelectForm
                  label="Lembaga Desa"
                  placeholder="Pilih Lembaga Desa"
                  value={chooseGroup.label}
                  required
                  onPress={() => {
                     setValChoose(chooseGroup.val);
                     setValSelect("group");
                     setSelect(true);
                  }}
                  error={error.group}
                  errorText="Lembaga Desa tidak boleh kosong"
               />
               <InputForm
                  label="Kegiatan"
                  type="default"
                  placeholder="Nama Kegiatan"
                  required
                  value={dataForm.title}
                  error={error.title}
                  errorText="Nama kegiatan tidak boleh kosong"
                  onChange={(val) => {
                     validationForm("title", val);
                  }}
               />
               <ButtonSelect
                  value="Tambah Tanggal & Tugas"
                  onPress={() => {
                     router.push(`/project/create/task`);
                  }}
                  error={error.task}
                  errorText="Tanggal & Tugas tidak boleh kosong"
               />
               <ButtonSelect value="Upload File" />
               <ButtonSelect
                  value="Pilih Anggota"
                  onPress={() => {
                     if (chooseGroup.val != "") {
                        setSelect(true);
                        setValSelect("member");
                     } else {
                        ToastAndroid.show(
                           "Pilih Lembaga Desa terlebih dahulu",
                           ToastAndroid.SHORT
                        );
                     }
                  }}
                  error={error.member}
                  errorText="Anggota tidak boleh kosong"
               />
               <SectionListAddTask />
               {entitiesMember.length > 0 && (
                  <View>
                     <View style={[Styles.rowSpaceBetween, Styles.mv05]}>
                        <Text>Anggota</Text>
                        <Text>Total {entitiesMember.length} Anggota</Text>
                     </View>

                     <View style={[Styles.borderAll, Styles.round10, Styles.p10]}>
                        {entitiesMember.map(
                           (item: { img: any; name: any }, index: any) => {
                              return (
                                 <BorderBottomItem
                                    key={index}
                                    borderType="bottom"
                                    icon={
                                       <ImageUser
                                          src={`https://wibu-storage.wibudev.com/api/files/${item.img}`}
                                          size="sm"
                                       />
                                    }
                                    title={item.name}
                                 />
                              );
                           }
                        )}
                     </View>
                  </View>
               )}
            </View>
         </ScrollView>

         <ModalSelect
            category={valSelect}
            close={setSelect}
            onSelect={(value) => {
               validationForm(valSelect, value.val, value.label);
            }}
            title={valSelect == "group" ? "Lembaga Desa" : "Pilih Anggota"}
            open={isSelect}
            idParent={valSelect == "member" ? chooseGroup.val : ""}
            valChoose={valChoose}
         />
      </SafeAreaView>
   );
}