import React from "react";
import Detail from "../Detail/Detail";
import FormFieldSchemaTypeUtil from "./Utils/FormFieldSchemaTypeUtil";
import FormFieldSchemaType from "./Types/FormFieldSchemaType";
import FieldType from "../Types/FieldType";
import HorizontalRule from "../HorizontalRule/HorizontalRule";
const getFieldName = (field) => {
    if (field.overrideFieldKey) {
        return field.overrideFieldKey;
    }
    const key = Object.keys(field.field || {})[0];
    return key;
};
const getFileSummaryElement = (field) => {
    if (field.fieldType !== FormFieldSchemaType.File &&
        field.fieldType !== FormFieldSchemaType.MultipleFiles) {
        return undefined;
    }
    const fieldName = getFieldName(field);
    if (!fieldName) {
        return undefined;
    }
    const formatFileName = (file, index) => {
        if (!file) {
            return `File ${index + 1}`;
        }
        if (typeof file === "string") {
            return file;
        }
        const fileObject = file;
        return (fileObject.name ||
            fileObject.fileName ||
            fileObject.slug ||
            fileObject._id ||
            `File ${index + 1}`);
    };
    const getFileSubtitle = (file) => {
        const subtitleParts = [];
        if (file.fileType && typeof file.fileType === "string") {
            subtitleParts.push(file.fileType);
        }
        if (file.slug && typeof file.slug === "string") {
            subtitleParts.push(file.slug);
        }
        return subtitleParts.length > 0 ? subtitleParts.join(" • ") : undefined;
    };
    const getAccessLabel = (file) => {
        if (typeof file.isPublic === "boolean") {
            return file.isPublic ? "Public" : "Private";
        }
        return undefined;
    };
    const renderFiles = (item) => {
        const formValuesRecord = item || {};
        const value = formValuesRecord[fieldName] || null;
        if (!value || (Array.isArray(value) && value.length === 0)) {
            return React.createElement("span", { className: "text-gray-500" }, "No files selected.");
        }
        const files = Array.isArray(value)
            ? value
            : [value];
        return (React.createElement("div", { className: "rounded-md border border-gray-200 bg-gray-50" },
            React.createElement("ul", { className: "divide-y divide-gray-200" }, files.map((file, index) => {
                const fileObject = typeof file === "string" ? { name: file } : file;
                const displayName = formatFileName(fileObject, index);
                const subtitle = getFileSubtitle(fileObject);
                const accessLabel = getAccessLabel(fileObject);
                const key = fileObject._id || `${displayName}-${index}`;
                return (React.createElement("li", { key: key, className: "flex items-center gap-3 px-3 py-2" },
                    React.createElement("div", { className: "min-w-0 flex-1" },
                        React.createElement("p", { className: "truncate text-sm font-medium text-gray-900" }, displayName),
                        subtitle && (React.createElement("p", { className: "truncate text-xs text-gray-500" }, subtitle))),
                    accessLabel && (React.createElement("span", { className: "rounded-full border border-gray-200 bg-white px-2 py-0.5 text-xs font-medium text-gray-600" }, accessLabel))));
            }))));
    };
    return renderFiles;
};
const FormSummary = (props) => {
    const { formValues, formFields } = props;
    const getDetailForFormFields = (formValues, formFields) => {
        return (React.createElement("div", null,
            React.createElement(Detail, { item: formValues, fields: formFields.map((field) => {
                    var _a;
                    const defaultSummaryElement = getFileSummaryElement(field);
                    const detailField = {
                        title: field.title || "",
                        fieldType: field.getSummaryElement
                            ? FieldType.Element
                            : FormFieldSchemaTypeUtil.toFieldType(field.fieldType || FormFieldSchemaType.Text),
                        description: field.description || "",
                        getElement: (field.getSummaryElement ||
                            defaultSummaryElement),
                        sideLink: field.sideLink,
                        key: (((_a = Object.keys(field.field || {})[0]) === null || _a === void 0 ? void 0 : _a.toString()) ||
                            ""),
                    };
                    if (defaultSummaryElement && !field.getSummaryElement) {
                        detailField.fieldType = FieldType.Element;
                    }
                    return detailField;
                }) }),
            React.createElement(HorizontalRule, null)));
    };
    const getFormStepTitle = (formStep) => {
        return (React.createElement("h2", { className: "text-md font-medium text-gray-900 mb-3" }, formStep.title));
    };
    const getDetailForFormStep = (formStep) => {
        const formFields = props.formFields
            .filter((field) => {
            return formStep.id === field.stepId;
        })
            .filter((formField) => {
            if (!formField.showIf) {
                return true;
            }
            return formField.showIf(formValues);
        });
        if (formFields.length === 0) {
            return React.createElement(React.Fragment, null);
        }
        return (React.createElement("div", null,
            getFormStepTitle(formStep),
            getDetailForFormFields(formValues, formFields)));
    };
    if (props.formSteps && props.formSteps.length > 0) {
        return (React.createElement("div", null, props.formSteps
            .filter((step) => {
            if (!step.showIf) {
                return true;
            }
            return step.showIf(props.formValues);
        })
            .map((formStep) => {
            return getDetailForFormStep(formStep);
        })));
    }
    return getDetailForFormFields(formValues, formFields);
};
export default FormSummary;
//# sourceMappingURL=FormSummary.js.map