/**
 * 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 { useCallback } from 'react';
import { Input, Label } from '@byline/ui/react';
import cx from 'clsx';
import { useFieldError, useFieldValue } from '../../forms/form-context';
import { LocaleBadge } from '../locale-badge';
import styles from './text-field.module.css';
export const TextField = ({ field, value, defaultValue, onChange, id, path, locale, components, }) => {
    const fieldPath = path ?? field.name;
    const fieldError = useFieldError(fieldPath);
    const fieldValue = useFieldValue(fieldPath);
    const incomingValue = value ?? fieldValue ?? defaultValue ?? '';
    const htmlId = id ?? fieldPath;
    const handleChange = useCallback((value) => {
        if (onChange) {
            onChange(value);
        }
    }, [onChange]);
    // Custom component slots (from admin config)
    const slots = components;
    const CustomLabel = slots?.Label;
    const CustomHelpText = slots?.HelpText;
    const CustomField = slots?.Field;
    const BeforeField = slots?.beforeField;
    const AfterField = slots?.afterField;
    // Shared props available to every slot component
    const slotBaseProps = {
        field: field,
        path: fieldPath,
        value: incomingValue,
        error: fieldError,
        id: htmlId,
    };
    // When a locale is active, render a custom Label+badge and suppress the
    // Input's own label so the locale indicator appears in the label row.
    const showBadge = !!locale && !!field.label;
    // Determine whether the label is handled externally (by a custom slot or
    // the locale badge row) so Input doesn't render its own.
    const hasCustomLabel = !!CustomLabel;
    const suppressInputLabel = showBadge || hasCustomLabel;
    const suppressInputHelpText = !!CustomHelpText;
    const labelRowClass = cx('byline-field-text-label-row', styles['label-row']);
    // ── Label rendering ──────────────────────────────────────────
    const renderLabel = () => {
        if (hasCustomLabel) {
            return (<div className={labelRowClass}>
          <CustomLabel {...slotBaseProps} label={field.label} required={!field.optional}/>
          {showBadge && <LocaleBadge locale={locale}/>}
        </div>);
        }
        if (showBadge) {
            return (<div className={labelRowClass}>
          <Label id={`${htmlId}-label`} htmlFor={htmlId} label={field.label} required={!field.optional}/>
          <LocaleBadge locale={locale}/>
        </div>);
        }
        return null;
    };
    // ── Field input rendering ────────────────────────────────────
    const renderInput = () => {
        if (CustomField) {
            return (<CustomField {...slotBaseProps} onChange={handleChange} defaultValue={defaultValue} placeholder={field.placeholder}/>);
        }
        return (<Input id={htmlId} name={field.name} label={suppressInputLabel ? undefined : field.label} required={!field.optional} helpText={suppressInputHelpText ? undefined : field.helpText} value={incomingValue} onChange={(e) => handleChange(e.target.value)} error={fieldError != null} errorText={fieldError}/>);
    };
    return (<div className={`byline-field-text ${field.name}`}>
      {renderLabel()}
      {BeforeField && <BeforeField {...slotBaseProps}/>}
      {renderInput()}
      {AfterField && <AfterField {...slotBaseProps}/>}
      {CustomHelpText && <CustomHelpText {...slotBaseProps} helpText={field.helpText}/>}
    </div>);
};