import { CSSProperties } from 'glamor';
import { ButtonStyles } from '../Button';

/**
 * Interface for styles to be applied to the input label component
 */
export interface InputLabelStyles {
  /**
   * Styles for the text in the label
   */
  text?: CSSProperties;
  /**
   * Styles for the required indicator
   */
  required?: CSSProperties;
}

/**
 * Interface for styles to be applied to the toggle type button
 */
export interface InputToggleTypeButtonStyles {
  /**
   * Styles for the wrapper of the button
   */
  wrapper?: CSSProperties;
  /**
   * Styles for the button
   * @see ButtonStyles
   */
  button?: ButtonStyles;
}

/**
 * Interface for styles to be applied to the input component
 */
export interface InputComponentStyles {
  /**
   * Styles for the container of the input.
   */
  container?: CSSProperties;
  /**
   * Styles for the label of the input element
   */
  label?: InputLabelStyles;
  /**
   * Styles for the input element
   */
  input?: CSSProperties;
  /**
   * Styles for the description, the description is
   * a text that appears below the input label and
   * above the input element.
   */
  description?: CSSProperties;
  /**
   * Styles for the toggle input type button when the input
   * is of type password. Or when the input is set to be
   * of password, this will be the button that toggles
   * the password visibility.
   */
  passwordToggleButton?: InputToggleTypeButtonStyles;
}