pedwfrontend/components/newappeal/buildfield.js

import useTranslation from "next-translate/useTranslation";
import { useRouter } from "next/router";
import {
    CheckBoxfield,
    DateFieldPicker,
    DecimalField,
    FieldArrayForm,
    FileUploadField,
    MultiLinefield,
    NumericField,
    PickList,
    Radiofield,
    ReadOnlyfield,
    RichMultiLinefield,
    Textfield,
    YesNofield,
} from "../elements";

export default function BuildField(props) {
    const { t } = useTranslation();
    const { locale } = useRouter();

    // Destructure frequently used props for clarity
    const {
        fieldType,
        label,
        datafieldname,
        picklistData,
        validation,
        hint,
        maxFieldLength,
        dateStart,
        dateEnd,
        documentTypeCode,
        uploadCount,
        setUploadCount,
        setFileCount,
        parentField,
        parentFieldShowOnValue,
        requiredDocumentValue,
        requiredDocumentLabel,
        setDocumentsList,
        documentList,
        maxSubField,
        datafieldcontent,
    } = props;

    // Extract deeply nested props for convenience (avoid props.props.props all over)
    // Defensive checks in case nested props don't exist
    const appealType = props?.props?.props?.appealType || {};
    const form = props?.props?.props?.form || {};
    const formProps = props?.props?.props?.props?.form || {};
    const setFilesForAppeal = props?.props?.props?.setFilesForAppeal;
    const accountDetails = props?.props?.props?.props?.accountDetails || {};
    const ticketnumber = appealType.caseReference?.ticketnumber || "";
    const fileList = appealType.fileList || {};
    const containerID = accountDetails.containerID || "";

    // Mapping fieldType to components
    const fieldTypeMap = {
        "{270BD3DB-D9AF-4782-9025-509E298DEC0A}": (
            <ReadOnlyfield
                name={datafieldname}
                label={label}
                value={ticketnumber}
                props={props}
                ticketnumber={ticketnumber}
            />
        ),
        "{3EF39988-22BB-4f0b-BBBE-64B5A3748AEE}": (
            <PickList
                name={datafieldname}
                label={label}
                datafieldname={datafieldname}
                picklistData={picklistData}
                validation={validation}
                hint={hint}
            />
        ),
        "{67FAC785-CD58-4f9f-ABB3-4B7DDC6ED5ED}": (
            <YesNofield
                name={datafieldname}
                label={label}
                requiredDocumentValue={requiredDocumentValue}
                requiredDocumentLabel={requiredDocumentLabel}
                validation={validation}
                setDocumentsList={setDocumentsList}
                documentList={documentList}
                form={form}
                formProps={formProps}
                parentField={parentField}
                parentFieldShowOnValue={parentFieldShowOnValue}
            />
        ),
        "{07FAC785-CD58-4f9f-ABB3-4B7DDC6ED5ED}": (
            <Radiofield
                name={datafieldname}
                label={label}
                datafieldname={datafieldname}
                options={datafieldcontent}
                inline={false}
                hint={hint}
                form={form}
                formProps={formProps}
                parentField={parentField}
                parentFieldShowOnValue={parentFieldShowOnValue}
                validation={validation}
                setDocumentsList={setDocumentsList}
                documentList={documentList}
                requiredDocumentValue={requiredDocumentValue}
                requiredDocumentLabel={requiredDocumentLabel}
            />
        ),
        "{4273EDBD-AC1D-40d3-9FB2-095C621B552D}": (
            <Textfield
                name={datafieldname}
                label={label}
                props={props}
                ticketnumber={ticketnumber}
                form={form}
                formProps={formProps}
                parentField={parentField}
                parentFieldShowOnValue={parentFieldShowOnValue}
                validation={validation}
                hint={hint}
                maxFieldLength={maxFieldLength}
            />
        ),
        "{5B773807-9FB2-42db-97C3-7A91EFF8ADFF}": (
            <DateFieldPicker
                name={datafieldname}
                label={label}
                form={form}
                formProps={formProps}
                parentField={parentField}
                parentFieldShowOnValue={parentFieldShowOnValue}
                validation={validation}
                dateStart={dateStart}
                dateEnd={dateEnd}
                hint={hint}
            />
        ),
        "{E0DECE4B-6FC8-4a8f-A065-082708572369}": (
            <MultiLinefield
                name={datafieldname}
                label={label}
                form={form}
                formProps={formProps}
                parentField={parentField}
                parentFieldShowOnValue={parentFieldShowOnValue}
                validation={validation}
                maxFieldLength={maxFieldLength}
                hint={hint}
            />
        ),
        "{E0DECE4B-6666-4a8f-A065-082708572369}": (
            <RichMultiLinefield
                name={datafieldname}
                label={label}
                form={form}
                formProps={formProps}
                parentField={parentField}
                parentFieldShowOnValue={parentFieldShowOnValue}
                validation={validation}
                maxFieldLength={maxFieldLength}
                hint={hint}
            />
        ),
        "{C6D124CA-7EDA-4a60-AEA9-7FB8D318B68F}": (
            <NumericField
                name={datafieldname}
                label={label}
                form={form}
                formProps={formProps}
                validation={validation}
                parentField={parentField}
                parentFieldShowOnValue={parentFieldShowOnValue}
                maxFieldLength={maxFieldLength}
            />
        ),
        "{C3EFE0C3-0EC6-42be-8349-CBD9079DFD8E}": (
            <DecimalField
                name={datafieldname}
                label={label}
                form={form}
                formProps={formProps}
                validation={validation}
                parentField={parentField}
                parentFieldShowOnValue={parentFieldShowOnValue}
                maxFieldLength={maxFieldLength}
            />
        ),
        "{16D63FD6-119B-4353-BDCA-18358721C3FE}": (
            <div className="govuk-!-margin-bottom-9">
                <FileUploadField
                    name={datafieldname}
                    label={label}
                    ticketnumber={ticketnumber}
                    documentTypeCode={documentTypeCode}
                    hint={hint}
                    fileList={fileList}
                    setFilesForAppeal={setFilesForAppeal}
                    containerID={containerID}
                    uploadCount={uploadCount}
                    setFileCount={setFileCount}
                    setUploadCount={setUploadCount}
                    props={props?.props?.props}
                />
            </div>
        ),
        "{0273EDBD-AC1D-40d3-9FB2-095C621B552D}": (
            <FieldArrayForm
                name={datafieldname}
                label={label}
                form={form}
                formProps={formProps}
                parentField={parentField}
                parentFieldShowOnValue={parentFieldShowOnValue}
                maxSubField={maxSubField}
            />
        ),
        "{9EF39988-22BB-4f0b-BBBE-64B5A3748AEE}": (
            <CheckBoxfield
                name={datafieldname}
                label={label}
                props={props}
                form={form}
                formProps={formProps}
                parentField={parentField}
                parentFieldShowOnValue={parentFieldShowOnValue}
                validation={validation}
            />
        ),
    };

    return (
        <div className="govuk-grid-row">
            {fieldTypeMap[fieldType] || (
                <Textfield name={datafieldname} label={label} />
            )}
        </div>
    );
}