import * as React from 'react';

import type { FormRowProps } from '../../FormRow/FormRow';
import { FormRow } from '../../FormRow/FormRow';
import type { FormRowHelperTextOwnProps } from '../../FormRow/FormRowHelperText';
import type { TextareaProps } from '../../Inputs/Textarea/Textarea';
import { Textarea } from '../../Inputs/Textarea/Textarea';
import type { LabelAfterProps } from '../../LabelAfter/LabelAfter';
import { LabelAfter } from '../../LabelAfter/LabelAfter';

/** @inheritdoc */
export interface TextareaFieldProps
  extends
    Omit<FormRowProps, 'children' | 'htmlFor' | 'isFullWidth' | 'label'>,
    Partial<FormRowHelperTextOwnProps>,
    Omit<TextareaProps, 'error' | 'warning'> {
  /**
   * Addon to the right of the input.
   *
   * **INTERNAL USE ONLY:** It is unsafe to rely on this prop, as it may change or be removed in the future.
   * @internal
   */
  UNSAFE_addon?: React.ReactNode;
  /**
   * Label displayed after the input element.
   */
  labelAfter?: LabelAfterProps['label'];
}

export const TextareaField = React.forwardRef<HTMLTextAreaElement, TextareaFieldProps>(function TextareaField(
  { UNSAFE_addon: addon, label, tooltip, required, error, warning, hint, justify, width, labelAfter, ...textareaProps },
  forwardedRef
) {
  return (
    <FormRow label={label} tooltip={tooltip} required={required} justify={justify} isFullWidth={width === 'full'}>
      <div className='v2FormField__input'>
        <Textarea
          ref={forwardedRef}
          required={required}
          error={!!error}
          warning={!!warning}
          width={width}
          {...textareaProps}
          label={label}
        />
        {labelAfter && <LabelAfter label={labelAfter} />}
        <FormRow.HelperText error={error} warning={warning} hint={hint} />
      </div>
      {addon}
    </FormRow>
  );
});