import React, { forwardRef } from 'react';
import { Label } from 'react-aria-components';
import classNames from 'classnames';

import { IconButton } from '../IconButton/IconButton';
import { Tooltip } from '../Tooltip/Tooltip';

import { FormRowHelperText } from './FormRowHelperText';
import type { FormRowLabelOwnProps } from './FormRowLabel';
import { FormRowLabel } from './FormRowLabel';

/** @inheritdoc */
export interface FormRowProps extends Pick<FormRowLabelOwnProps, 'htmlFor' | 'justify' | 'required'> {
  /**
   * The label for the form row.
   * If not provided, the form row will not render a label.
   */
  label?: string;
  /**
   * Whether to visually hide the label (but keep it accessible for screen readers).
   */
  labelHidden?: FormRowLabelOwnProps['visuallyHidden'];
  /**
   * Informational tooltip to display next to the form row.
   */
  tooltip?: React.ReactNode;
  /**
   * The form row's children (usually an input element).
   */
  children?: React.ReactNode;
  /**
   * The element to render the form row as.
   * @default 'label'
   */
  as?: 'label' | 'div';
  /**
   * If set to true, the container stretches to full width.
   */
  isFullWidth?: boolean;
}

/** @deprecated */
export const FormRow = Object.assign(
  forwardRef(function FormRow(
    {
      label,
      labelHidden,
      children,
      required,
      tooltip,
      justify,
      as = 'label',
      htmlFor,
      isFullWidth,
      ...rest
    }: FormRowProps,
    forwardedRef: React.Ref<HTMLLabelElement | HTMLDivElement>
  ) {
    const Container = as === 'label' ? Label : as;

    return (
      <Container
        {...rest}
        ref={forwardedRef as any}
        className={classNames('v2FormField', {
          full: isFullWidth,
        })}
        htmlFor={Container === Label ? htmlFor : undefined}
      >
        {label && (
          <FormRowLabel
            as={Container === Label ? 'span' : 'label'}
            htmlFor={Container === Label ? undefined : htmlFor}
            justify={justify}
            visuallyHidden={labelHidden}
            required={required}
          >
            {label}
          </FormRowLabel>
        )}
        {children}
        {tooltip && (
          <Tooltip content={tooltip}>
            <IconButton ghost icon='shp-info' />
          </Tooltip>
        )}
      </Container>
    );
  }),
  { HelperText: FormRowHelperText, Label: FormRowLabel }
);