Files
cally/components/pages/calendar/AddEventDialog.tsx
2024-10-20 16:11:53 +02:00

177 lines
6.7 KiB
TypeScript

import React, {useState} from "react";
import {MaterialIcons,} from "@expo/vector-icons";
import {Button, Card, Dialog, PanningProvider, Text, View,} from "react-native-ui-lib";
import {StyleSheet, TouchableOpacity} from "react-native";
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";
import {useSetAtom} from "jotai";
import {selectedNewEventDateAtom} from "@/components/pages/calendar/atoms";
export const AddEventDialog = () => {
const [show, setShow] = useState(false);
const [choreDialogVisible, setChoreDialogVisible] = useState<boolean>(false);
const [showUploadDialog, setShowUploadDialog] = useState<boolean>(false);
const setSelectedNewEndDate = useSetAtom(selectedNewEventDateAtom)
const handleOpenManualInputModal = () => {
setShow(false);
setTimeout(() => {
setSelectedNewEndDate(new Date());
}, 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
disabled
style={{
marginBottom: 10,
// backgroundColor: "#ea156c",
justifyContent: "center",
width: "100%",
paddingVertical: 13,
opacity: 0.5
}}
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
disabled
style={{
marginBottom: 10,
// backgroundColor: "#05a8b6",
justifyContent: "center",
width: "100%",
paddingVertical: 13,
opacity: 0.5
}}
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}
/>
<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},
});