import { formClassName, formHelpClassName } from '@admin/components/ui/field-styles';
import { useFormResponse } from '@admin/hooks/use-form-response';
import { useSingletonPermissions } from '@admin/hooks/use-singleton-permissions';
import { dashboardPersistentLayout } from '@admin/layouts/dashboard-page-layout';
import { AboutFormFields } from '@admin/pages/about/about-form-fields';
import { cn } from '@admin/lib/utils';
import { Head, useForm } from '@inertiajs/react';
import { FormEvent } from 'react';

type AboutPayload = {
    mission: string;
    vision: string;
    motto: string;
    intro: string;
    about_text: string;
    objectives: string;
    occasion_title: string;
    occasion_text: string;
    why_choose: string;
    core_values: string;
    about_image: string;
    about_image_secondary: string;
    breadcrumb_image: string;
    video_image: string;
    video_url: string;
    facebook: string;
    x: string;
    instagram: string;
    linkedin: string;
    address: string;
    location_summary: string;
    email: string;
    primary_phone: string;
    secondary_phone: string;
    whatsapp: string;
};

type EditAboutProps = {
    about: AboutPayload;
    exists: boolean;
};

function EditAbout({ about, exists }: EditAboutProps) {
    const { canEdit } = useSingletonPermissions('about');
    const { data, setData, put, processing, errors } = useForm(about);

    const action = useFormResponse({
        loadingMessage: exists ? 'Saving changes...' : 'Creating about page...',
    });

    const handleSubmit = (event: FormEvent) => {
        event.preventDefault();

        put('/admin/api/about', {
            onStart: action.onStart,
            onSuccess: action.onSuccess,
            onError: action.onError,
            preserveScroll: true,
        });
    };

    return (
        <>
            <Head title="About us" />

            <div className="grid grid-cols-12 gap-6">
                <div className="col-span-12">
                    <p className={cn('mb-4', formHelpClassName)}>
                        {exists
                            ? 'Edit the About Us story, photos, reasons to stay, and values. Team members are managed under Team. Offers shown on this page are managed under Offers. Statistics shown on this page are managed under Statistics.'
                            : 'No about record yet — save once to create it, then continue editing here. Team members are managed under Team, offers under Offers, and statistics under Statistics.'}
                    </p>

                    <form className={formClassName} noValidate onSubmit={handleSubmit}>
                        <AboutFormFields data={data} errors={errors} setData={setData} />

                        {canEdit && (
                            <button type="submit" className="ti-btn ti-btn-primary" disabled={processing}>
                                {exists ? 'Save changes' : 'Save'}
                            </button>
                        )}
                        {!canEdit && <p className={formHelpClassName}>You do not have permission to edit this page.</p>}
                    </form>
                </div>
            </div>
        </>
    );
}

export default Object.assign(EditAbout, {
    layout: dashboardPersistentLayout('About us', 'Resort story, photos, reasons to stay, and values'),
});