import { formClassName, formHelpClassName } from '@admin/components/ui/field-styles';
import {
editPermission,
userCan,
viewPermission,
} from '@admin/lib/admin-permissions';
import { cn } from '@admin/lib/utils';
import { useFormResponse } from '@admin/hooks/use-form-response';
import { dashboardPersistentLayout } from '@admin/layouts/dashboard-page-layout';
import {
MenuBackgroundImagesFormFields,
type MenuBackgroundImagesFormData,
type MenuBackgroundUploadSlot,
} from '@admin/pages/customization/menu-background-images/menu-background-images-form-fields';
import { type SharedData } from '@/types';
import { Head, useForm, usePage } from '@inertiajs/react';
import { FormEvent } from 'react';
type EditMenuBackgroundImagesProps = {
section: MenuBackgroundImagesFormData;
exists: boolean;
slots: MenuBackgroundUploadSlot[];
};
function EditMenuBackgroundImages({ section, exists, slots }: EditMenuBackgroundImagesProps) {
const permissions = usePage().props.auth.user?.permissions;
const canEdit = userCan(permissions, editPermission('menu-background-images'));
const canView = userCan(permissions, viewPermission('menu-background-images'));
const { data, setData, put, processing, errors } = useForm(section);
const action = useFormResponse({
loadingMessage: exists ? 'Saving changes...' : 'Saving menu background images...',
});
const handleSubmit = (event: FormEvent) => {
event.preventDefault();
put('/admin/api/customization/menu-background-images', {
onStart: action.onStart,
onSuccess: action.onSuccess,
onError: action.onError,
preserveScroll: true,
});
};
if (!canView) {
return (
<>
You do not have permission to view this page.
);
}
return (
<>