import { FormCheckbox } from '@admin/components/ui/forms/form-checkbox';
import { FormGroup } from '@admin/components/ui/forms/form-group';
import { FormNumberInput } from '@admin/components/ui/forms/form-number-input';
import { FormRadioInInput } from '@admin/components/ui/forms/form-radio-in-input';
import { FormSelect } from '@admin/components/ui/forms/form-select';
import { FormSwitch } from '@admin/components/ui/forms/form-switch';
import { emptyQrPayload, type QrCategoryOption, type QrCodePayload, type QrCodeTypeOption, type QrCodeTypeValue } from '@admin/types/qr-code';

type QrCodeFormData = {
    qr_category_id: string;
    new_category_name: string;
    new_category_code: string;
    create_new_category: boolean;
    name: string;
    type: QrCodeTypeValue;
    payload: QrCodePayload;
    sort_order: number;
    status: boolean;
};

type QrCodeFormFieldsProps = {
    data: QrCodeFormData;
    errors: Partial<Record<string, string>>;
    categories: QrCategoryOption[];
    types: QrCodeTypeOption[];
    setData: (key: string, value: unknown) => void;
};

export function QrCodeFormFields({ data, errors, categories, types, setData }: QrCodeFormFieldsProps) {
    const payload = { ...emptyQrPayload, ...data.payload };
    const setPayload = (key: keyof QrCodePayload, value: unknown) => {
        setData('payload', { ...payload, [key]: value });
    };

    return (
        <>
            <FormSwitch
                id="qr-create-new-category"
                label="Create a new category"
                checked={data.create_new_category}
                onChange={(event) => {
                    setData('create_new_category', event.target.checked);
                    if (event.target.checked) {
                        setData('qr_category_id', '');
                    } else {
                        setData('new_category_name', '');
                        setData('new_category_code', '');
                    }
                }}
            />

            {data.create_new_category ? (
                <>
                    <FormGroup
                        label="New category name"
                        error={errors.new_category_name}
                        helpText="Created on save if it does not already exist."
                        inputProps={{
                            value: data.new_category_name,
                            onChange: (event) => setData('new_category_name', event.target.value),
                            required: true,
                        }}
                    />
                    <FormGroup
                        label="Category code"
                        error={errors.new_category_code}
                        helpText="Optional unique slug. Generated from the name if left blank."
                        inputProps={{
                            value: data.new_category_code,
                            onChange: (event) => setData('new_category_code', event.target.value),
                            placeholder: 'events',
                        }}
                    />
                </>
            ) : (
                <FormSelect
                    label="Category"
                    value={data.qr_category_id}
                    error={errors.qr_category_id}
                    options={categories.map((category) => ({
                        value: String(category.id),
                        label: `${category.name} (${category.code})`,
                    }))}
                    onChange={(value) => setData('qr_category_id', value)}
                />
            )}

            <FormGroup
                label="Name"
                error={errors.name}
                inputProps={{
                    value: data.name,
                    onChange: (event) => setData('name', event.target.value),
                    required: true,
                }}
            />

            <FormRadioInInput
                name="qr-type"
                label="QR format"
                value={data.type}
                options={types}
                error={errors.type}
                onChange={(value) => setData('type', value)}
            />

            {data.type === 'url' && (
                <FormGroup
                    label="URL"
                    error={errors['payload.url']}
                    inputProps={{
                        type: 'url',
                        value: payload.url,
                        placeholder: 'https://example.com',
                        onChange: (event) => setPayload('url', event.target.value),
                        required: true,
                    }}
                />
            )}

            {data.type === 'text' && (
                <FormGroup
                    as="textarea"
                    label="Text"
                    error={errors['payload.text']}
                    inputProps={{
                        value: payload.text,
                        rows: 4,
                        onChange: (event) => setPayload('text', event.target.value),
                        required: true,
                    }}
                />
            )}

            {data.type === 'wifi' && (
                <>
                    <FormGroup
                        label="Network name (SSID)"
                        error={errors['payload.ssid']}
                        inputProps={{
                            value: payload.ssid,
                            onChange: (event) => setPayload('ssid', event.target.value),
                            required: true,
                        }}
                    />
                    <FormGroup
                        label="Password"
                        error={errors['payload.password']}
                        inputProps={{
                            value: payload.password,
                            onChange: (event) => setPayload('password', event.target.value),
                        }}
                    />
                    <FormSelect
                        label="Encryption"
                        value={payload.encryption || 'WPA'}
                        sortAlphabetically={false}
                        placeholder="Select encryption"
                        options={[
                            { value: 'WPA', label: 'WPA/WPA2' },
                            { value: 'WEP', label: 'WEP' },
                            { value: 'nopass', label: 'None' },
                        ]}
                        error={errors['payload.encryption']}
                        onChange={(value) => setPayload('encryption', value)}
                    />
                    <FormCheckbox
                        id="qr-wifi-hidden"
                        label="Hidden network"
                        checked={Boolean(payload.hidden)}
                        onChange={(event) => setPayload('hidden', event.target.checked)}
                    />
                </>
            )}

            {data.type === 'email' && (
                <>
                    <FormGroup
                        label="Email"
                        error={errors['payload.email']}
                        inputProps={{
                            type: 'email',
                            value: payload.email,
                            onChange: (event) => setPayload('email', event.target.value),
                            required: true,
                        }}
                    />
                    <FormGroup
                        label="Subject"
                        error={errors['payload.subject']}
                        inputProps={{
                            value: payload.subject,
                            onChange: (event) => setPayload('subject', event.target.value),
                        }}
                    />
                    <FormGroup
                        as="textarea"
                        label="Body"
                        error={errors['payload.body']}
                        inputProps={{
                            value: payload.body,
                            rows: 3,
                            onChange: (event) => setPayload('body', event.target.value),
                        }}
                    />
                </>
            )}

            {(data.type === 'sms' || data.type === 'phone') && (
                <FormGroup
                    label="Phone number"
                    error={errors['payload.number']}
                    inputProps={{
                        value: payload.number,
                        onChange: (event) => setPayload('number', event.target.value),
                        required: true,
                    }}
                />
            )}

            {data.type === 'sms' && (
                <FormGroup
                    as="textarea"
                    label="Message"
                    error={errors['payload.message']}
                    inputProps={{
                        value: payload.message,
                        rows: 3,
                        onChange: (event) => setPayload('message', event.target.value),
                    }}
                />
            )}

            {data.type === 'vcard' && (
                <>
                    <FormGroup
                        label="First name"
                        error={errors['payload.firstName']}
                        inputProps={{
                            value: payload.firstName,
                            onChange: (event) => setPayload('firstName', event.target.value),
                        }}
                    />
                    <FormGroup
                        label="Last name"
                        error={errors['payload.lastName']}
                        inputProps={{
                            value: payload.lastName,
                            onChange: (event) => setPayload('lastName', event.target.value),
                        }}
                    />
                    <FormGroup
                        label="Organisation"
                        error={errors['payload.organization']}
                        inputProps={{
                            value: payload.organization,
                            onChange: (event) => setPayload('organization', event.target.value),
                        }}
                    />
                    <FormGroup
                        label="Job title"
                        error={errors['payload.title']}
                        inputProps={{
                            value: payload.title,
                            onChange: (event) => setPayload('title', event.target.value),
                        }}
                    />
                    <FormGroup
                        label="Phones"
                        helpText="Comma-separated."
                        error={errors['payload.phones']}
                        inputProps={{
                            value: payload.phones,
                            onChange: (event) => setPayload('phones', event.target.value),
                        }}
                    />
                    <FormGroup
                        label="Emails"
                        helpText="Comma-separated."
                        error={errors['payload.emails']}
                        inputProps={{
                            value: payload.emails,
                            onChange: (event) => setPayload('emails', event.target.value),
                        }}
                    />
                    <FormGroup
                        label="Website"
                        error={errors['payload.url']}
                        inputProps={{
                            type: 'url',
                            value: payload.url,
                            onChange: (event) => setPayload('url', event.target.value),
                        }}
                    />
                    <FormGroup
                        as="textarea"
                        label="Note"
                        error={errors['payload.note']}
                        inputProps={{
                            value: payload.note,
                            rows: 2,
                            onChange: (event) => setPayload('note', event.target.value),
                        }}
                    />
                </>
            )}

            <FormNumberInput
                label="Display order"
                helpText="Lower numbers appear first."
                min={0}
                value={data.sort_order}
                error={errors.sort_order}
                required
                onChange={(value) => setData('sort_order', value)}
            />

            <FormSwitch
                id="qr-code-status"
                label="Published"
                checked={data.status}
                onChange={(event) => setData('status', event.target.checked)}
            />
        </>
    );
}