/**
 * This Source Code is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/.
 *
 * Copyright (c) Infonomic Company Limited
 */
import { useMemo } from 'react';
import { ErrorText } from '@byline/ui/react';
import cx from 'clsx';
import { sliceFieldAdmin } from '../../fields/field-admin';
import { placeholderForField } from '../../fields/field-helpers';
import { FieldRenderer } from '../../fields/field-renderer';
import { useFieldError } from '../../forms/form-context';
import styles from './group-field.module.css';
export const GroupField = ({ field, defaultValue, path, disableSorting = true, contentLocale, fieldAdmin, }) => {
    const fieldError = useFieldError(field.name);
    // Default value for a group field is a plain object: { rating: 5, comment: '...' }
    // Normalize to a plain object if not already one.
    const groupData = useMemo(() => {
        if (defaultValue && typeof defaultValue === 'object' && !Array.isArray(defaultValue)) {
            return defaultValue;
        }
        // Fallback: build a placeholder object from child field definitions
        const placeholder = {};
        for (const childField of field.fields) {
            placeholder[childField.name] = placeholderForField(childField);
        }
        return placeholder;
    }, [defaultValue, field.fields]);
    return (<div className={`byline-field-group ${field.name}`}>
      {field.label && (<div className={cx('byline-field-group-header', styles.header)}>
          <h3 className={cx('byline-field-group-title', styles.title)}>
            {field.label}{' '}
            {!field.optional && (<span className={cx('byline-field-group-required', styles.required)}>*</span>)}
          </h3>
          {field.helpText && (<p className={cx('byline-field-group-help', styles.help)}>{field.helpText}</p>)}
        </div>)}
      <div className={cx('byline-field-group-body', styles.body)}>
        {field.fields.map((innerField) => {
            return (<FieldRenderer key={innerField.name} field={innerField} defaultValue={groupData[innerField.name]} basePath={path} disableSorting={disableSorting} contentLocale={contentLocale} components={fieldAdmin?.[innerField.name]?.components} editor={fieldAdmin?.[innerField.name]?.editor} fieldAdmin={sliceFieldAdmin(fieldAdmin, innerField.name)}/>);
        })}
      </div>
      {fieldError && <ErrorText id={`${field.name}-error`} text={fieldError}/>}
    </div>);
};