import * as React from 'react';

import type { Complete, Exact, SafeOmit } from '@shoptet/utils';
import { destruct, omit, pick } from '@shoptet/utils';

import type { FormRowProps } from '../../FormRow/FormRow';
import { FormRow } from '../../FormRow/FormRow';
import type { FormRowHelperTextOwnProps } from '../../FormRow/FormRowHelperText';
import type { RangeInputProps } from '../../Inputs/RangeInput/RangeInput';
import { RangeInput } from '../../Inputs/RangeInput/RangeInput';

export interface RangeFieldOwnProps {
  /**
   * 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;
}
export interface RangeFieldContainerProps extends SafeOmit<
  FormRowProps,
  'children' | 'label' | 'htmlFor' | 'isFullWidth'
> {}
export interface RangeFieldHelperTextProps extends Partial<FormRowHelperTextOwnProps> {}
export interface RangeFieldInputProps extends SafeOmit<RangeInputProps, 'error' | 'warning'> {}

/** @inheritdoc */
export interface RangeFieldProps
  extends RangeFieldOwnProps, RangeFieldContainerProps, RangeFieldHelperTextProps, RangeFieldInputProps {}

export const RangeField = function RangeField(props: RangeFieldProps) {
  const [ownProps, formRowProps, helperTextProps, inputProps] = destruct(
    props,
    ['UNSAFE_addon'],
    ['as', 'justify', 'labelHidden', 'required', 'tooltip'],
    ['error', 'hint', 'warning']
  );
  ownProps satisfies Exact<Complete<RangeFieldOwnProps>, typeof ownProps>;
  formRowProps satisfies Exact<Complete<RangeFieldContainerProps>, typeof formRowProps>;
  helperTextProps satisfies Exact<Complete<RangeFieldHelperTextProps>, typeof helperTextProps>;
  inputProps satisfies Exact<Complete<Omit<RangeFieldInputProps, 'required'>>, typeof inputProps>;

  return (
    <FormRow label={inputProps.label} {...formRowProps} {...pick(inputProps, 'data-testid')}>
      <div className='v2FormField__input'>
        <RangeInput
          required={formRowProps.required}
          error={!!helperTextProps.error}
          warning={!!helperTextProps.warning}
          {...omit(inputProps, 'data-testid')}
        />
        <FormRow.HelperText {...helperTextProps} />
      </div>
      {ownProps.UNSAFE_addon}
    </FormRow>
  );
};