import ButtonBackHeader from "@/components/buttonBackHeader";
import ButtonSaveHeader from "@/components/buttonSaveHeader";
import { InputForm } from "@/components/inputForm";
import SelectForm from "@/components/selectForm";
import { ColorsStatus } from "@/constants/ColorsStatus";
import Styles from "@/constants/Styles";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import * as ImagePicker from 'expo-image-picker';
import { router, Stack } from "expo-router";
import { useState } from "react";
import { Image, Pressable, SafeAreaView, ScrollView, Text, View } from "react-native";

export default function CreateMember() {
   const [chooseGroup, setChooseGroup] = useState({ val: '', label: '' })
   const [selectedImage, setSelectedImage] = useState<string | undefined>(undefined);

   const pickImageAsync = async () => {
      let result = await ImagePicker.launchImageLibraryAsync({
         mediaTypes: ['images'],
         allowsEditing: true,
         quality: 1,
      });

      if (!result.canceled) {
         setSelectedImage(result.assets[0].uri);
      } else {
         alert('Tidak ada gambar yang dipilih');
      }
   };

   return (
      <SafeAreaView>
         <Stack.Screen
            options={{
               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
               headerTitle: 'Tambah Anggota',
               headerTitleAlign: 'center',
               headerRight: () => <ButtonSaveHeader category="create" onPress={() => { router.push('/member') }} />
            }}
         />
         <ScrollView>
            <View style={[Styles.p15, Styles.mb100]}>
               <View style={{ justifyContent: 'center', alignItems: 'center' }}>
                  {
                     selectedImage != undefined ? (
                        <Pressable onPress={pickImageAsync}>
                           <Image src={selectedImage} style={[Styles.userProfileBig]} />
                        </Pressable>
                     ) : (
                        <Pressable onPress={pickImageAsync} style={[Styles.iconContent, ColorsStatus.gray]}>
                           <MaterialCommunityIcons name="account-tie" size={100} color={'gray'} />
                        </Pressable>
                     )
                  }
               </View>
               <SelectForm label="Lembaga Desa" placeholder="Pilih Lembaga Desa" value={chooseGroup.label} required onPress={() => { }} />
               <SelectForm label="Jabatan" placeholder="Pilih Jabatan" value={chooseGroup.label} required onPress={() => { }} />
               <SelectForm label="User Role" placeholder="Pilih Role" value={chooseGroup.label} required onPress={() => { }} />
               <InputForm label="NIK" type="numeric" placeholder="NIK" required />
               <InputForm label="Nama" type="default" placeholder="Nama" required />
               <InputForm label="Email" type="default" placeholder="Email" required />
               <InputForm label="Nomor Telepon" type="numeric" placeholder="8XX-XXX-XXX" required itemLeft={<Text>+62</Text>} />
               <SelectForm label="Jenis Kelamin" placeholder="Pilih Jenis Kelamin" value={chooseGroup.label} required onPress={() => { }} />
               {/* <ButtonForm
                  text="SIMPAN"
                  onPress={() => {
                     AlertKonfirmasi({
                        title: 'Konfirmasi',
                        desc: 'Apakah anda yakin ingin menambahkan data?',
                        onPress: () => {
                           ToastAndroid.show('Berhasil menambahkan data', ToastAndroid.SHORT)
                           router.push('/member?active=true')
                        }
                     })
                  }} /> */}
            </View>
         </ScrollView>
      </SafeAreaView>
   )
}