declare module '@tryretool/custom-component-support' {
  declare namespace Retool {
    type SerializableType = string | number | boolean | null | SerializableObject | SerializableArray

    interface SerializableObject {
      [key: string]: SerializableType
    }

    type SerializableArray = Array<SerializableType>

    /**
     * This method allows you to add boolean state to your component.
     * Like any other component in Retool, custom components can have their own state, which you can then edit using the inspector.
     *
     * @param {string} name The name of the state used internally, and the label that will be used in the inspector to identify it.
     *   This should be an alphanumerical string with no spaces.
     * @param {boolean} [initialValue] The initial value for the state when the component is dragged onto the canvas.
     * @param {('text' | 'checkbox' | 'hidden')} [inspector] What kind of inspector will be used when a builder is editing this state.
     * @param {string} [description] What will be displayed in the tooltip of the inspector for this state.
     * @param {string} [label] An override for the label used in the inspector for this state.
     *
     * @return {[boolean, (newValue: boolean) => void]} The value of the state, and a function to update it.
     */
    function useStateBoolean({
      name,
      initialValue,
      inspector,
      description,
      label,
    }: {
      name: string
      initialValue?: boolean
      label?: string
      description?: string
      inspector?: 'text' | 'checkbox' | 'hidden'
    }): readonly [boolean, (newValue: boolean) => void]

    /**
     * This method allows you to add number state to your component.
     * Like any other component in Retool, custom components can have their own state, which you can then edit using the inspector.
     *
     * @param {string} name The name of the state used internally, and the label that will be used in the inspector to identify it.
     *   This should be an alphanumerical string with no spaces.
     * @param {number} [initialValue] The initial value for the state when the component is dragged onto the canvas.
     * @param {('text' | 'hidden')} [inspector] What kind of inspector will be used when a builder is editing this state.
     * @param {string} [description] What will be displayed in the tooltip of the inspector for this state.
     * @param {string} [label] An override for the label used in the inspector for this state.
     *
     * @return {[number, (newValue: number) => void]} The value of the state, and a function to update it.
     */
    function useStateNumber({
      name,
      initialValue,
      inspector,
      description,
      label,
    }: {
      name: string
      initialValue?: number
      label?: string
      description?: string
      inspector?: 'text' | 'hidden'
    }): readonly [number, (newValue: number) => void]

    /**
     * This method allows you to add string state to your component.
     * Like any other component in Retool, custom components can have their own state, which you can then edit using the inspector.
     *
     * @param {string} name The name of the state used internally, and the label that will be used in the inspector to identify it.
     *   This should be an alphanumerical string with no spaces.
     * @param {string} [initialValue] The initial value for the state when the component is dragged onto the canvas.
     * @param {('text' | 'hidden')} [inspector] What kind of inspector will be used when a builder is editing this state.
     * @param {string} [description] What will be displayed in the tooltip of the inspector for this state.
     * @param {string} [label] An override for the label used in the inspector for this state.
     *
     * @return {[string, (newValue: string) => void]} The value of the state, and a function to update it.
     */
    function useStateString({
      name,
      initialValue,
      inspector,
      description,
      label,
    }: {
      name: string
      initialValue?: string
      label?: string
      description?: string
      inspector?: 'text' | 'hidden'
    }): readonly [string, (newValue: string) => void]

    /**
     * This method allows you to add enumeration state to your component. This is state that can have a value drawn from a limited set of strings.
     * Like any other component in Retool, custom components can have their own state, which you can then edit using the inspector.
     *
     * @param {string} name The name of the state used internally, and the label that will be used in the inspector to identify it.
     *   This should be an alphanumerical string with no spaces.
     * @param {T} enumDefinition An array of string literals describing the possible enum values. The strings must be alphanumeric with no spaces.
     * @param {T[number]} [initialValue] The initial value for the state when the component is dragged onto the canvas.
     * @param {{[K in T[number]]: string}} [enumLabels] Alternative labels to use for enums when displaying them.
     * @param {('segmented' | 'select')} [inspector] What kind of inspector will be used when a builder is editing this state.
     * @param {string} [description] What will be displayed in the tooltip of the inspector for this state.
     * @param {string} [label] An override for the label used in the inspector for this state.
     *
     * @return {[T[number], (newValue: T[number]) => void]} The value of the state, and a function to update it.
     */
    function useStateEnumeration<T extends string[]>({
      name,
      enumDefinition,
      initialValue,
      enumLabels,
      inspector,
      description,
      label,
    }: {
      name: string
      initialValue?: T[number]
      enumDefinition: T
      enumLabels?: {
        [K in T[number]]: string
      }
      inspector?: 'segmented' | 'select' | 'hidden'
      description?: string
      label?: string
    }): readonly [T[number], (newValue: T[number]) => void]

    /**
     * This method allows you to add serializable object state to your component.
     * Like any other component in Retool, custom components can have their own state, which you can then edit using the inspector.
     *
     * **NOTE:** Due to the internal mechanism used, the setter will apply new values as a partial update of the current state, similar to `Object.assign()`.
     *
     * @param {string} name The name of the state used internally, and the label that will be used in the inspector to identify it.
     *   This should be an alphanumerical string with no spaces.
     * @param {SerializableObject} [initialValue] The initial value for the state when the component is dragged onto the canvas.
     * @param {('text' | 'hidden')} [inspector] What kind of inspector will be used when a builder is editing this state.
     * @param {string} [description] What will be displayed in the tooltip of the inspector for this state.
     * @param {string} [label] An override for the label used in the inspector for this state.
     *
     * @return {[SerializableObject, (updates: SerializableObject) => void]} The value of the state, and a function to update it.
     */
    function useStateObject({
      name,
      initialValue,
      inspector,
      description,
      label,
    }: {
      name: string
      initialValue?: SerializableObject
      inspector?: 'text' | 'hidden'
      description?: string
      label?: string
    }): readonly [SerializableObject, (updates: SerializableObject) => void]

    /**
     * This method allows you to add serializable array state to your component.
     * Like any other component in Retool, custom components can have their own state, which you can then edit using the inspector.
     *
     * @param {string} name The name of the state used internally, and the label that will be used in the inspector to identify it.
     *   This should be an alphanumerical string with no spaces.
     * @param {SerializableArray} [initialValue] The initial value for the state when the component is dragged onto the canvas.
     * @param {('text' | 'hidden')} [inspector] What kind of inspector will be used when a builder is editing this state.
     * @param {string} [description] What will be displayed in the tooltip of the inspector for this state.
     * @param {string} [label] An override for the label used in the inspector for this state.
     *
     * @return {[SerializableArray, (newValue: SerializableArray) => void]} The value of the state, and a function to update it.
     */
    function useStateArray({
      name,
      initialValue,
      inspector,
      description,
      label,
    }: {
      name: string
      initialValue?: SerializableArray
      inspector?: 'text' | 'hidden'
      description?: string
      label?: string
    }): readonly [SerializableArray, (newValue: SerializableArray) => void]

    /**
     * Defines an event callback for your component. While building with the component you will be able to create event handlers that are triggered
     * whenever this event callback is called.
     *
     * For example, you could create an event callback which is triggered whenever a user clicks on a button in your component.
     *
     * The event cannot contain any data or context. The suggested workflow for this is to set state on the componenent before firing
     * an event, and then to reference that state in any event handlers. An example of how this can be found in our [docs](https://docs.retool.com/apps/web/guides/components/develop-custom-components/custom-components-beta#retooluseeventcallback). 
     *
     * @param {string} name The name of the label that the event callback will be given in the inspector.
     */
    function useEventCallback({ name }: { name: string }): () => void

    /**
     * Allows configuration of various settings on your component
     *
     * @param {string} defaultWidth Sets the default width in columns of the component when you drag it onto the canvas
     * @param {string} defaultHeight Sets the default height in rows of the component when you drag it onto the canvas
     */
    function useComponentSettings({
      defaultWidth,
      defaultHeight,
    }: {
      defaultWidth?: number
      defaultHeight?: number
    }): void
  }
}