Files
cally/components/pages/calendar/AddEventDialog.tsx
2024-10-15 23:07:21 +02:00

189 lines
5.3 KiB
TypeScript

import React, { useState } from "react";
import {
AntDesign,
Feather,
MaterialCommunityIcons,
MaterialIcons,
} from "@expo/vector-icons";
import {
Button,
ButtonSize,
Card,
Dialog,
PanningProvider,
Text,
View,
} from "react-native-ui-lib";
import { StyleSheet, TouchableOpacity } from "react-native";
import { ManuallyAddEventModal } from "@/components/pages/calendar/ManuallyAddEventModal";
import AddChoreDialog from "../todos/AddChoreDialog";
import { ToDosContextProvider } from "@/contexts/ToDosContext";
import UploadImageDialog from "./UploadImageDialog";
import CameraIcon from "@/assets/svgs/CameraIcon";
import CalendarIcon from "@/assets/svgs/CalendarIcon";
import NavToDosIcon from "@/assets/svgs/NavToDosIcon";
export const AddEventDialog = () => {
const [show, setShow] = useState(false);
const [showManualInputModal, setShowManualInputModal] = useState(false);
const [choreDialogVisible, setChoreDialogVisible] = useState<boolean>(false);
const [showUploadDialog, setShowUploadDialog] = useState<boolean>(false);
const handleOpenManualInputModal = () => {
setShow(false);
setTimeout(() => {
setShowManualInputModal(true);
}, 500);
};
const handleScanImageDialog = () => {
setShow(false);
setTimeout(() => {
setShowUploadDialog(true);
}, 100);
};
return (
<ToDosContextProvider>
<>
<Button
style={{
position: "absolute",
bottom: 20,
right: 20,
height: 40,
borderRadius: 30,
backgroundColor: "#fd1775",
alignItems: "center",
justifyContent: "center",
}}
color="white"
enableShadow
onPress={() => setShow(true)}
>
<View row centerV centerH>
<MaterialIcons name="add" size={22} color={"white"} />
<Text white style={{ fontSize: 16, fontFamily: 'Manrope_600SemiBold' }}>
New
</Text>
</View>
</Button>
<Dialog
visible={show}
onDismiss={() => setShow(false)}
panDirection={PanningProvider.Directions.DOWN}
center
>
<Card style={styles.dialogCard}>
<Text text60 style={styles.modalTitle}>
Create a new event
</Text>
<View
style={{ marginTop: 20, alignItems: "center", width: "100%" }}
>
<Button
style={{
marginBottom: 10,
backgroundColor: "#ea156c",
justifyContent: "center",
width: "100%",
paddingVertical: 13,
}}
label="Scan Image"
labelStyle={styles.btnLabel}
onPress={handleScanImageDialog}
iconSource={() => (
<CameraIcon color="white" style={styles.btnIcon} />
)}
/>
<Button
style={{
marginBottom: 10,
backgroundColor: "#e28800",
justifyContent: "center",
width: "100%",
paddingVertical: 13,
}}
label="Create Event"
labelStyle={styles.btnLabel}
onPress={handleOpenManualInputModal}
iconSource={() => (
<CalendarIcon color={"white"} style={styles.btnIcon} />
)}
/>
<Button
style={{
marginBottom: 10,
backgroundColor: "#05a8b6",
justifyContent: "center",
width: "100%",
paddingVertical: 13,
}}
label="Add To Do"
labelStyle={styles.btnLabel}
onPress={() => setChoreDialogVisible(true)}
iconSource={() => (
<NavToDosIcon
color={"white"}
width={23}
style={styles.btnIcon}
/>
)}
/>
</View>
<TouchableOpacity onPress={() => setShow(false)}>
<Text style={styles.bottomText} text70>
Go back to calendar
</Text>
</TouchableOpacity>
</Card>
</Dialog>
<AddChoreDialog
isVisible={choreDialogVisible}
setIsVisible={setChoreDialogVisible}
/>
<ManuallyAddEventModal
show={showManualInputModal}
close={() => setShowManualInputModal(false)}
/>
<UploadImageDialog
show={showUploadDialog}
setShow={setShowUploadDialog}
/>
</>
</ToDosContextProvider>
);
};
const styles = StyleSheet.create({
modalTitle: {
fontSize: 22,
fontFamily: "Manrope_600SemiBold",
marginBottom: 16,
},
bottomText: {
marginTop: 20,
color: "#999999",
fontSize: 13.53,
fontFamily: "Poppins_500Medium",
},
dialogCard: {
paddingHorizontal: 40,
paddingTop: 35,
paddingBottom: 20,
justifyContent: "center",
alignItems: "center",
borderRadius: 20,
},
btnLabel: {
fontSize: 15,
fontFamily: "PlusJakartaSans_500Medium",
},
btnIcon: { marginRight: 10 },
});