import React, { useEffect, useState } from "react";
import {
useGetEventsByIdQuery,
useUpdateEventsMutation,
} from "../../Services/api.service";
import fallbackImage from "../../assets/ultp-fallback-img.webp";
import { useNavigate, useParams } from "react-router-dom";
import {
Box,
Button,
Divider,
FormControl,
FormHelperText,
FormLabel,
Heading,
Image,
Input,
Stack,
Tag,
Textarea,
useToast,
} from "@chakra-ui/react";
import { addEvents } from "../../Validations/Validations";
import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import FullscreenLoaders from "../../Components/Loaders/FullscreenLoaders";
import { OPACITY_ON_LOAD } from "../../Layout/animations";
import Header from "../../Components/Header";
import { TiWarning } from "react-icons/ti";
import { motion } from "framer-motion";
import Loader01 from "../../Components/Loaders/Loader01";
import ToastBox from "../../Components/ToastBox";
import { formatDate } from "../../Components/Functions/UTCConvertor";
import ChipSelector from "../../Components/ChipSelector/ChipSelector";
const convertToDateArray = (dateArray) => {
return dateArray?.map((dateString) => {
const date = new Date(dateString);
const year = date.getUTCFullYear();
const month = String(date.getUTCMonth() + 1).padStart(2, "0"); // getUTCMonth() is zero-based
const day = String(date.getUTCDate()).padStart(2, "0");
return `${year}-${month}-${day}`;
});
};
const EditEvents = () => {
const { id } = useParams();
const toast = useToast();
const navigate = useNavigate();
const { data, error, isLoading } = useGetEventsByIdQuery(id);
const [isLoadingEdit, setIsLoadingEdit] = useState(false);
const [selectedImage, setSelectedImage] = useState(fallbackImage);
const [largeImageData, setLargeImageData] = useState(null);
const [updateEvents] = useUpdateEventsMutation();
const [eventsDate, setEventsDate] = useState(
convertToDateArray(data?.data?.eventDates.map((event) => event.date))
);
const {
register,
handleSubmit,
reset,
watch,
formState: { errors },
setValue,
} = useForm({
resolver: yupResolver(addEvents),
defaultValues: {
title: "",
content: "",
location: "",
organizer_name: "",
organizer_mobile_number: "",
// eventDates: eventsDate,
organizer_email: "",
banner_image: null,
},
});
useEffect(() => {
if (data?.data) {
setSelectedImage(
`${API_URL}/${data?.data?.banner_image}`
);
setValue("title", data?.data?.title);
setValue("content", data?.data?.content);
setValue("location", data?.data?.location);
setValue("organizer_name", data?.data?.organizer_name);
setValue("organizer_mobile_number", data?.data?.organizer_mobile_number);
setValue("organizer_email", data?.data?.organizer_email);
setValue("content", data?.data?.content);
// setValue("eventDates", data?.data?.eventDates);
setValue("banner_image", data?.data?.banner_image);
// setValue("eventDates", eventsDate);
}
}, [data, setValue]);
const handleImageChange = (e) => {
const file = e.target.files[0];
setLargeImageData(file);
if (file) {
const reader = new FileReader();
reader.onloadend = () => {
setSelectedImage(reader.result);
};
reader.readAsDataURL(file);
}
};
const onSubmit = (data) => {
setIsLoadingEdit(true);
const formData = new FormData();
formData.append("title", data.title);
formData.append("content", data.content);
formData.append("location", data.location);
formData.append("organizer_name", data.organizer_name);
formData.append("organizer_mobile_number", data.organizer_mobile_number);
formData.append("organizer_email", data.organizer_email);
if (eventsDate.length === 0) {
setIsLoadingEdit(false);
return toast({
render: () => (
),
})
}else{
eventsDate.forEach((date, index) => {
formData.append(`dates[${index}]`, date);
});
}
if (data.banner_image[0]) {
formData.append("banner_image", data.banner_image[0]);
}
// for (const [key, value] of formData.entries()) {
// // console.log(`${key}: ${value}`);
// }
// Trigger the mutationconst
const res = updateEvents({ id: id, data: formData })
.then((response) => {
// Handle the response here
// // console.log("Mutation response:", response?.data?.statusCode);
// // console.log("Mutation response:", response?.data?.message);
if (response?.data?.statusCode === 201) {
setIsLoadingEdit(false);
toast({
render: () => (
),
});
reset();
navigate("/events");
} else if (response?.data?.statusCode === 500) {
setIsLoadingEdit(false);
toast({
render: () => (
),
});
}
})
.catch((error) => {
// Handle errors
// // console.error("Error creating community:", error?.message);
setIsLoadingEdit(false);
// Handle error notification if needed
});
};
return isLoading ? (
) : (