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

declare module '@devseed-ui/form' {
  /**
   * Styled component for a FormGroup. Useful for style purposes to create a
   * FormGroupStructure.
   * Renders `<div>`
   */
  export const FormGroup: StyledComponent<'div', DefaultTheme, {}, never>

  export interface formGroupHeaderProps {
    /**
     * Visually hides the element, but remains visible to screen readers.
     */
    isHidden?: boolean
  }

  /**
   * Styled component for a FormGroupHeader. Useful for style purposes to create
   * a FormGroupStructure.
   * Renders `<div>`
   *
   * @param {formGroupHeaderProps} props Props for the component.
   */
  export const FormGroupHeader: StyledComponent<'div', DefaultTheme, formGroupHeaderProps, never>

  /**
   * Styled component for a FormGroupBody. Useful for style purposes to create a
   * FormGroupStructure.
   * Renders `<div>`
   */
  export const FormGroupBody: StyledComponent<'div', DefaultTheme, {}, never>

  /**
   * Styled component for a FormGroupFooter. Useful for style purposes to create
   * a FormGroupStructure.
   * Renders `<div>`
   */
  export const FormGroupFooter: StyledComponent<'div', DefaultTheme, {}, never>

  export interface formGroupStructureProps {
    /**
     * Value for the label's htmlFor attribute. Prop passed to the `FormLabel`.
     * This is not used as an Id attribute.
     */
    id: string;

    /**
     * Value for the label
     */
    label: React.ReactNode;

    /**
     * Display a hint with value "(optional)" after the label.
     * Prop passed to the `FormLabel`
     *
     * @default false
     */
    optional?: boolean;

    /**
     * Display a hint with value "(required)" after the label.
     * Overrides optional.
     * Prop passed to the `FormLabel`
     *
     * @default false
     */
    required?: boolean;

    /**
     * Display a hint with custom value after the label.
     * Overrides required.
     * Prop passed to the `FormLabel`
     */
    hint?: React.ReactNode;

    /**
     * Whether or not to visually hide the `FormGroupHeader`. Prop passed to the
     * `FormGroupHeader`
     *
     * @default false
     */
    hideHeader?: boolean;

    /**
     * Class name prop for the form group structure wrapper.
     * Prop passed to the `FormGroup`
     */
    className?: string;

    /**
     * Space to render a Toolbar. Will be rendered in the `FormGroupHeader`
     * after `FormLabel`. Should be a `Toolbar` component.
     */
    toolbar?: React.ReactNode;

    /**
     * Content rendered inside `FormHelper`.
     */
    helper?: JSX.Element | null;

    /**
     * The children of `FormGroupStructure` should be the actual form element.
     */
    children: React.ReactNode;

    /**
     * Content for the `FormGroupFooter`.
     */
    footerContent?: React.ReactNode;
  }

  /**
   * Wrapper element for form fields.
   *
   * @param {formGroupStructureProps} props 
   */
  function FormGroupStructure(props: formGroupStructureProps): JSX.Element;
}