ldc-groupe/resources/ts/back/Components/DynamicPages/DynamicInputs.tsx

// * Packages
import { usePage } from "@inertiajs/react";
// * Other
import SimpleString from "@/back/Components/Inputs/SimpleString";
import SimpleNumber from "@/back/Components/Inputs/SimpleNumber";
import SimpleSwitch from "@/back/Components/Inputs/SimpleSwitch";
import SimpleWysiwyg from "@/back/Components/Inputs/SimpleWysiwyg";
import ImageCropper from "@/back/Components/Inputs/ImageCropper";
import DynamicList from "@/back/Components/DynamicPages/DynamicList";
import { ConfigField, DynamicFieldTypes, DynamicInternalField } from "@/back/types/global";
import str from "@/hooks/use-string";
import useTrans from "@/hooks/use-translations";
import {
    extractLaravelValidationValue,
    extractMinMaxFromValidation,
    extractRequiredValidation,
} from "@/hooks/use-laravel-validation";

type DynamicInputsProps = {
    name: string;
    config: ConfigField[];
    content: DynamicInternalField | null;
    setData: (name: string, value: string | boolean | File | object | null) => void;
    reset: (name?: string) => void;
};

export default function DynamicInputs({
    name,
    config,
    content = null,
    setData,
    reset,
}: DynamicInputsProps) {
    const enumDynamicFieldTypes = usePage().props.enumDynamicFieldTypes as DynamicFieldTypes;

    // Translations.
    const transAssociateTo = useTrans("back.form_associate_to");
    const transUnsupportedType = useTrans("back.unsupported_type");

    /**
     * Get a translation for a specific field label.
     * Need to recreate useTrans hook to avoid hook error.
     * @param fieldLabel string
     * @returns string
     */
    const getTrans = (fieldLabel: string): string => {
        return str(`${transAssociateTo.split("|")[0].replace(":attribute", fieldLabel)}`).ucFirst().value();
    };

    return (
        <div className="grid grid-cols-1 md:grid-cols-2 items-start gap-4">
            {Object.entries(config).map(([id, field]) => {
                const typeEnum = Object.values(enumDynamicFieldTypes).find(
                    (def) => def.value === field.type,
                );

                const fieldName = `${name}.${field.key}`;
                const fieldValue = content?.[field.key as keyof typeof content] ?? "";

                switch (field.type) {
                    // String input.
                    case enumDynamicFieldTypes.string.value:
                        return (
                            <SimpleString
                                key={id}
                                name={fieldName}
                                label={getTrans(field.label)}
                                required={extractRequiredValidation(field.validation)}
                                value={String(fieldValue)}
                                setData={setData}
                            />
                        );
                    // Wysiwyg input.
                    case enumDynamicFieldTypes.text.value:
                        return (
                            <div key={id} className="col-span-1 md:col-span-2">
                                <SimpleWysiwyg
                                    name={fieldName}
                                    model="DynamicPage"
                                    label={getTrans(field.label)}
                                    value={String(fieldValue)}
                                    setData={setData}
                                />
                            </div>
                        );
                    // Numbers input.
                    case enumDynamicFieldTypes.number.value:
                        return (
                            <SimpleNumber
                                key={id}
                                name={fieldName}
                                label={getTrans(field.label)}
                                limits={extractMinMaxFromValidation(field.validation)}
                                required={extractRequiredValidation(field.validation)}
                                value={Number(fieldValue)}
                                setData={setData}
                            />
                        );
                    // Switch input.
                    case enumDynamicFieldTypes.boolean.value:
                        return (
                            <div key={id} className="grid grid-cols-1 gap-1.5">
                                <label
                                    htmlFor={`#${fieldName}`}
                                    className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                                >
                                    {`${getTrans(field.label)} ${extractRequiredValidation(field.validation) ? " *" : ""}`}
                                </label>
                                <SimpleSwitch
                                    name={fieldName}
                                    checked={Boolean(fieldValue)}
                                    setData={setData}
                                />
                            </div>
                        );
                    // Url input.
                    case enumDynamicFieldTypes.url.value:
                        return (
                            <SimpleString
                                key={id}
                                name={fieldName}
                                label={getTrans(field.label)}
                                type="url"
                                placeholder="ex: https://..."
                                required={extractRequiredValidation(field.validation)}
                                value={String(fieldValue)}
                                setData={setData}
                            />
                        );
                    // Image input.
                    case enumDynamicFieldTypes.image.value:
                        return (
                            <ImageCropper
                                key={id}
                                fileName="fichier"
                                name={fieldName}
                                label={getTrans(field.label)}
                                setData={setData}
                                reset={reset}
                                value={String(fieldValue)}
                                required={extractRequiredValidation(field.validation)}
                                maxFileSize={extractLaravelValidationValue(field.validation, 'max')}
                                allowedFormats={extractLaravelValidationValue(field.validation, 'mimes')}
                                validationRules={{
                                    width: extractLaravelValidationValue(field.validation, "dimensions", 'width'),
                                    height: extractLaravelValidationValue(field.validation, "dimensions", 'height')
                                }}
                            />
                        );
                    // Email input.
                    case enumDynamicFieldTypes.email.value:
                        return (
                            <SimpleString
                                key={id}
                                name={fieldName}
                                label={getTrans(field.label)}
                                type="email"
                                placeholder="ex: john.doe@ldc.fr"
                                required={extractRequiredValidation(field.validation)}
                                value={String(fieldValue)}
                                setData={setData}
                            />
                        );
                    // List input.
                    case enumDynamicFieldTypes.list.value:
                        return (
                            <DynamicList
                                key={id}
                                name={fieldName}
                                parentName={name}
                                content={content}
                                field={field}
                                value={Array.isArray(fieldValue) ? fieldValue : []}
                                enumLabel={enumDynamicFieldTypes.list.label}
                                setData={setData}
                                reset={reset}
                            />
                        );
                    default:
                        return (
                            <p
                                key={id}
                                className="text-muted-foreground text-sm"
                            >
                                {transUnsupportedType} {typeEnum?.label ?? field.type}
                            </p>
                        );
                }
            })}
        </div>
    );
}