import * as React from 'react';

export interface EditableSelectorProps {
  /** Applied as data-hook HTML attribute that can be used in the tests. */
  dataHook?: string;
  styles?: string;
  /** The editable selector's title. */
  title?: string;
  /** Specifies the type of the toggle.
   * @default 'checkbox'
   */
  toggleType?: 'checkbox' | 'radio';
  /** Text for the add new row button.
   * @default 'New Row'
   */
  newRowLabel?: string;
  /** Text for the edit button.
   * @default 'Edit'
   */
  editButtonText?: string;
  /** New option added callback function. */
  onOptionAdded?: (title: string) => void;
  /** Option edited callback function. */
  onOptionEdit?: (title: string, id: number) => void;
  /** Option deleted callback function. */
  onOptionDelete?: (id: number) => void;
  /** Option toggled callback function. */
  onOptionToggle?: (id: number) => void;
  /** Array of objects:
   * * `title` - the title of the option.
   * * `isSelected` - whether this option is selected or not.
   */
  options?: EditableSelectorOption[];
}

export type EditableSelectorOption = {
  /** The editable selector's title. */
  title: string;
  isSelected?: boolean;
};

export class EditableSelector extends React.Component<EditableSelectorProps> {}