Prop Types

/**
 * Basic property types for user inputs
 */
type BasicPropType = 
  | "string"   // String input field
  | "boolean"  // Boolean checkbox
  | "integer"  // Numeric input field
  | "app";     // App reference

/**
 * Array variants of basic property types
 */
type ArrayPropType = 
  | "string[]"   // Array of strings
  | "boolean[]"  // Array of booleans
  | "integer[]"; // Array of integers

/**
 * App-specific property types for service integrations
 */
type AppSpecificPropType = 
  | "$.airtable.baseId"    // Airtable base selector
  | "$.airtable.tableId"   // Airtable table selector  
  | "$.airtable.viewId";   // Airtable view selector

/**
 * Union of all supported property types
 */
type PropType = BasicPropType | ArrayPropType | AppSpecificPropType;

/**
 * Configuration interface for user input properties
 */
interface UserInputProp {
  /** The type of property (required) */
  type: PropType;
  /** Display label for the property (optional) */
  label?: string;
  /** Help text describing the property (optional) */
  description?: string;
  /** Whether the property is optional (default: false) */
  optional?: boolean;
  /** Default value for the property (optional) */
  default?: any;
  /** Whether the property contains sensitive data (optional) */
  secret?: boolean;
  /** Minimum value for integer types (optional) */
  min?: number;
  /** Maximum value for integer types (optional) */
  max?: number;
  /** Available options for selection (optional) */
  options?: PropOptions;
  /** Enable search functionality for options (optional) */
  useQuery?: boolean;
  /** Reference to app prop definition (optional) */
  propDefinition?: [PipedreamApp, string, any?];
  /** Reference to app prop for app-specific types (optional) */
  appProp?: string;
  /** Reference to base ID prop for table/view selection (optional) */
  baseIdProp?: string;
  /** Reference to table ID prop for view selection (optional) */
  tableIdProp?: string;
}

import { UserInputProp } from "@pipedream/types";

// Simple string input
const nameProperty: UserInputProp = {
  type: "string",
  label: "Name",
  description: "Enter your name",
  optional: false
};

// Integer with constraints
const ageProperty: UserInputProp = {
  type: "integer",
  label: "Age",
  description: "Your age in years",
  min: 0,
  max: 150,
  default: 25
};

// Secret field
const apiKeyProperty: UserInputProp = {
  type: "string",
  label: "API Key",
  description: "Your service API key",
  secret: true
};

// Property with static options
const statusProperty: UserInputProp = {
  type: "string",
  label: "Status",
  options: ["active", "inactive", "pending"]
};

/**
 * Union type for property option configurations
 */
type PropOptions = 
  | string[]                              // Simple string array
  | { label: string; value: any }[]       // Label-value objects
  | AsyncOptionsMethod;                   // Dynamic options function

/**
 * Function interface for loading dynamic options
 */
interface AsyncOptionsMethod {
  (context: AsyncOptionsContext): Promise<
    | string[]
    | { label: string; value: any }[]
    | PaginatedOptionsResult
  >;
}

// Static string options
const simpleOptions: PropOptions = ["option1", "option2", "option3"];

// Label-value options
const labelValueOptions: PropOptions = [
  { label: "Development", value: "dev" },
  { label: "Production", value: "prod" },
  { label: "Staging", value: "stage" }
];

// Async options method
const asyncOptionsProperty: UserInputProp = {
  type: "string",
  label: "Select User",
  options: async ({ query, prevContext }) => {
    const users = await fetchUsers({ search: query });
    return users.map(user => ({
      label: user.name,
      value: user.id
    }));
  }
};

/**
 * Context object passed to async options methods
 */
interface AsyncOptionsContext {
  /** Page number for numeric pagination (optional) */
  page?: number;
  /** Previous context token for pagination (optional) */
  prevContext?: string;
  /** Search query when useQuery is enabled (optional) */
  query?: string;
  /** Additional context from other component props */
  [key: string]: any;
}

/**
 * Result object for paginated option loading
 */
interface PaginatedOptionsResult {
  /** Array of options (strings or label-value objects) */
  options: Array<string | { label: string; value: any }>;
  /** Context for next page (optional) */
  context?: {
    /** Token for loading the next page (optional) */
    nextPageToken?: string;
  };
}

const paginatedOptionsProperty: UserInputProp = {
  type: "string",
  label: "Select Repository",
  useQuery: true,
  options: async ({ query, prevContext }) => {
    const response = await fetchRepositories({
      search: query,
      pageToken: prevContext
    });
    
    return {
      options: response.repositories.map(repo => ({
        label: repo.fullName,
        value: repo.id
      })),
      context: response.nextPageToken ? {
        nextPageToken: response.nextPageToken
      } : undefined
    };
  }
};

/**
 * Reference to a prop definition from an app
 * Format: [AppReference, PropName, AdditionalParams?]
 */
type PropDefinitionReference = [PipedreamApp, string, any?];

// App with prop definitions
const githubApp: PipedreamApp = {
  type: "app",
  app: "github",
  propDefinitions: {
    repository: {
      type: "string",
      label: "Repository",
      description: "Select a GitHub repository",
      options: async ({ $auth }) => {
        const repos = await fetchUserRepos($auth.oauth_access_token);
        return repos.map(repo => ({
          label: repo.full_name,
          value: repo.full_name
        }));
      }
    }
  }
};

// Component using the prop definition
const componentUsingPropDef: PipedreamComponent = {
  name: "GitHub Component",
  version: "1.0.0",
  props: {
    github: githubApp,
    repo: {
      type: "string",
      propDefinition: [githubApp, "repository"]
    }
  },
  async run(event) {
    console.log("Selected repository:", this.repo);
  }
};

const dependentProperty: UserInputProp = {
  type: "string",
  label: "Branch",
  description: "Select a branch from the repository",
  options: async ({ repo }) => {
    if (!repo) return [];
    const branches = await fetchBranches(repo);
    return branches.map(branch => branch.name);
  }
};

const searchableProperty: UserInputProp = {
  type: "string",
  label: "Search Issues",
  description: "Search for GitHub issues",
  useQuery: true,
  options: async ({ query }) => {
    if (!query || query.length < 2) return [];
    const issues = await searchIssues(query);
    return issues.map(issue => ({
      label: `#${issue.number}: ${issue.title}`,
      value: issue.number
    }));
  }
};

const multiSelectProperty: UserInputProp = {
  type: "string[]",
  label: "Select Tags",
  description: "Choose multiple tags",
  options: ["bug", "feature", "enhancement", "documentation"]
};

const conditionalProperty: UserInputProp = {
  type: "string",
  label: "Webhook URL",
  description: "URL for webhook notifications",
  optional: true,
  // Note: Conditional display logic is handled by Pipedream's runtime
  // This property would only be shown based on other property values
};

// Airtable base selector
const airtableBaseProperty: UserInputProp = {
  type: "$.airtable.baseId",
  appProp: "airtable" // References the airtable app prop
};

// Airtable table selector (depends on base)
const airtableTableProperty: UserInputProp = {
  type: "$.airtable.tableId",
  baseIdProp: "baseId" // References the baseId prop
};

// Airtable view selector (depends on table)
const airtableViewProperty: UserInputProp = {
  type: "$.airtable.viewId", 
  tableIdProp: "tableId" // References the tableId prop
};

// Complete component example with Airtable hierarchy
const airtableComponent: PipedreamComponent = {
  name: "Airtable Component",
  version: "1.0.0",
  props: {
    airtable: {
      type: "app",
      app: "airtable"
    } as PipedreamApp,
    baseId: {
      type: "$.airtable.baseId",
      appProp: "airtable"
    },
    tableId: {
      type: "$.airtable.tableId", 
      baseIdProp: "baseId"
    },
    viewId: {
      type: "$.airtable.viewId",
      tableIdProp: "tableId"
    }
  },
  async run(event) {
    console.log("Selected:", {
      base: this.baseId,
      table: this.tableId,
      view: this.viewId
    });
  }
};