import React, { forwardRef } from 'react';
import classNames from 'classnames';

import type { FieldProps as CoreFieldProps } from '@shoptet/ui-core-web';
import { Field as CoreField } from '@shoptet/ui-core-web';
import type { Exact, SafePick } from '@shoptet/utils';

import type { OmitPrivate } from '../../types';
import { IconButton } from '../IconButton/IconButton';
import { Tooltip } from '../Tooltip/Tooltip';

import { FieldHelperText } from './FieldHelperText';
import { FieldLabel } from './FieldLabel';
import { FieldLabelAfter } from './FieldLabelAfter';

export interface FieldInheritedDivProps extends OmitPrivate<React.HTMLAttributes<HTMLDivElement>> {}

export interface FieldOwnProps {
  /**
   * Informational tooltip to display next to the form row.
   */
  tooltip?: React.ReactNode;
  /**
   * The form row's children (usually an input element).
   */
  children?: React.ReactNode;
  /**
   * If set to true, the container stretches to full width.
   */
  isFullWidth?: boolean;
}

/** @inheritdoc */
export interface FieldProps
  extends
    FieldOwnProps,
    SafePick<CoreFieldProps, 'disabled' | 'invalid' | 'readOnly' | 'required'>,
    FieldInheritedDivProps {}

export const Field = Object.assign(
  forwardRef(function Field(
    { children, required, tooltip, isFullWidth, invalid, disabled, readOnly, ...rest }: FieldProps,
    forwardedRef: React.Ref<HTMLDivElement>
  ) {
    rest satisfies Exact<FieldInheritedDivProps, typeof rest>;

    return (
      <CoreField
        {...rest}
        ref={forwardedRef}
        className={classNames('v2FormField', {
          full: isFullWidth,
        })}
        disabled={disabled}
        invalid={invalid}
        readOnly={readOnly}
        required={required}
      >
        {children}
        {tooltip && (
          <Tooltip content={tooltip}>
            <IconButton ghost icon='shp-info' />
          </Tooltip>
        )}
      </CoreField>
    );
  }),
  { HelperText: FieldHelperText, Label: FieldLabel, LabelAfter: FieldLabelAfter }
);