import { formClassName } from '@admin/components/ui/field-styles';
import { FormGroup } from '@admin/components/ui/forms/form-group';
import { FormSwitch } from '@admin/components/ui/forms/form-switch';
import { Modal } from '@admin/components/ui/modal';
import { useFormResponse } from '@admin/hooks/use-form-response';
import type { QrCodePayload } from '@admin/types/qr-code';
import { useForm } from '@inertiajs/react';
import { FormEvent, useEffect } from 'react';

type QrCodeRecord = {
    id: number;
    qr_category_id?: number | null;
    name: string;
    payload?: QrCodePayload;
    sort_order?: number;
    status: boolean | number;
};

type EditQrCodeProps = {
    isOpen: boolean;
    onClose: () => void;
    initialData: QrCodeRecord | Record<string, unknown> | null;
};

function asRecord(data: QrCodeRecord | Record<string, unknown>): QrCodeRecord {
    return data as QrCodeRecord;
}

export default function EditQrCode({ isOpen, onClose, initialData }: EditQrCodeProps) {
    const { data, setData, put, processing, errors, reset } = useForm({
        qr_category_id: '',
        name: '',
        url: '',
        sort_order: 0,
        status: true,
    });

    useEffect(() => {
        if (!initialData) {
            return;
        }

        const record = asRecord(initialData);
        const payload = record.payload ?? {};

        setData({
            qr_category_id: record.qr_category_id ? String(record.qr_category_id) : '',
            name: record.name ?? '',
            url: typeof payload.url === 'string' ? payload.url : '',
            sort_order: record.sort_order ?? 0,
            status: record.status === true || record.status === 1,
        });
    }, [initialData, setData]);

    const action = useFormResponse({
        onComplete: () => {
            reset();
            onClose();
        },
        loadingMessage: 'Saving changes...',
    });

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

        if (!initialData || !('id' in initialData)) {
            return;
        }

        put(`/admin/api/update_qr_code/${asRecord(initialData).id}`, {
            onStart: action.onStart,
            onSuccess: action.onSuccess,
            onError: action.onError,
            preserveScroll: true,
        });
    };

    if (!isOpen) {
        return null;
    }

    return (
        <Modal
            isOpen={isOpen}
            onClose={onClose}
            title="Edit QR code"
            primaryButtonText="Save changes"
            onPrimaryAction={handleSave}
            processing={processing}
        >
            <form className={formClassName} noValidate onSubmit={handleSave}>
                <FormGroup
                    label="Name"
                    error={errors.name}
                    inputProps={{
                        value: data.name,
                        onChange: (event) => setData('name', event.target.value),
                        required: true,
                    }}
                />
                <FormGroup
                    label="URL"
                    error={errors.url ?? errors['payload.url']}
                    inputProps={{
                        type: 'url',
                        value: data.url,
                        placeholder: 'https://',
                        onChange: (event) => setData('url', event.target.value),
                        required: true,
                    }}
                />
                <FormSwitch
                    label="Active"
                    checked={data.status}
                    onChange={(event) => setData('status', event.target.checked)}
                />
            </form>
        </Modal>
    );
}