import { DefaultTheme, StyledComponent } from 'styled-components';

declare module '@devseed-ui/form' {
  export interface formHelperMessageProps {
    /**
     * Whether or not the message being rendered is representative of an error.
     * @default false
     */
    invalid?: boolean;
  }

  /**
   * Wrapper to display a helper message.
   * @param {formHelperMessageProps} props Props for the message
   */
  export const FormHelperMessage: StyledComponent<'p', DefaultTheme, formHelperMessageProps, never>

  /**
   * The wrapper where the helper components are rendered.
   * If using `FormGroupStructure` this wrapper is already present when using
   * `helper` prop.
   */
  export const FormHelper: StyledComponent<'div', DefaultTheme, {}, never>

  export type formHelperCounterProps = JSX.IntrinsicElements['p'] & {
    /**
     * The current value to show on the counter.
     */
    value: number;

    /**
     * The max value to show on the counter.
     */
    max: number;

    /**
     * The value at which the counter color changes to warning.
     * @default "90% of max"
     */
    warnAt?: number;
  }

  /**
   * Counter component, shown on the right.
   * Useful for text based inputs. Will change color as the `value` reaches the
   * `max`
   * @param {formHelperCounterProps} props Props for the counter.
   */
  function FormHelperCounter(props: formHelperCounterProps): JSX.Element;
}