import classNames from 'classnames';
import { FormDefaults } from './FormDefaults';
import FieldErrorScrollTarget from './Field/FieldErrorScrollTarget';
import { InjectedFieldProps } from './Field/InjectedFieldProps';

export interface GroupProps extends InjectedFieldProps<any> {
  /** Extra class names to apply. */
  className?: string;

  children: React.ReactNode;

  /** Simple text label before the input. */
  label?: string;

  /** Simple helper text after the input. */
  helpText?: string | React.ReactNode;

  /** Whether the field should be disabled. */
  disabled?: boolean;

  required?: boolean;
}

/** Contains standard field bits like a label, helper text, error scroll target, validation message container, etc. */
export default function Group({
  className,
  children,
  label,
  helpText,
  meta,
  input,
  disabled,
  required,
}: GroupProps) {
  return (
    <div
      className={classNames(className, FormDefaults.cssClassPrefix + 'group', {
        [FormDefaults.cssClassPrefix + 'invalid']: meta.error,
        [FormDefaults.cssClassPrefix + 'disabled']: disabled,
        [FormDefaults.cssClassPrefix + 'required']: required,
      })}>
      <FieldErrorScrollTarget />
      {meta.warning && (
        <div className={FormDefaults.cssClassPrefix + 'warning'}>
          {meta.warning}
        </div>
      )}
      <label htmlFor={input.id}>{label}</label>
      {children}
      {meta.error && (
        <div
          id={`${input.id}-error`}
          className={FormDefaults.cssClassPrefix + 'error'}>
          {meta.error}
        </div>
      )}
      {helpText && (
        <div className={FormDefaults.cssClassPrefix + 'help'}>{helpText}</div>
      )}
    </div>
  );
}