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

declare module '@devseed-ui/form' {
  export interface formCheckableProps {
    /**
     * Determines the type of input to render.
     */
    type: 'checkbox' | 'radio';

    /**
     * Name to be used as `name` prop of the element.
     * (html prop)
     */
    name: string;

    /**
     * id to be used as `id` prop of the element.
     * (html prop)
     */
    id: string;

    /**
     * Label's title attribute.
     */
    title?: string;

    /**
     * Whether or not the FormCheckable is checked.
     */
    checked?: boolean;

    /**
     * Change callback for the FormCheckable
     */
    onChange: (e: React.SyntheticEvent) => void;

    /**
     * Value for the underlying input element
     */
    value: string | number;

    /**
     * Content for the FormCheckable's label.
     */
    children: React.ReactNode;

    /**
     * Where to position the text.
     * @default "right"
     */
    textPlacement?: 'left' | 'right';

    /**
     * Whether or not to hide the FormCheckable's label.
     */
    hideText?: boolean;
  }

  /**
   * Displays a checkable element. Can be either a radio button or a checkbox.
   *
   * @param {formCheckableProps} props Props for the FormCheckable.
   */
  export const FormCheckable: StyledComponent<
    'label',
    DefaultTheme,
    formCheckableProps,
    never
  >;

  /**
   * Styled component for a group of `FormCheckable`. Useful for style purposes.
   * Renders `<div>`
   */
  export const FormCheckableGroup: StyledComponent<
    'div',
    DefaultTheme,
    {},
    never
  >;
}