import React from 'react';
import { COMPONENT_MODE, GET_DATASET_STATUS } from './constants';
import type { Layout } from '../app';
import type { DatasetConfig } from '../dataset-manager';

export type ComponentConfig = {
  id: string;
  type: string;
  datasetId: DatasetConfig['id'];
  config: Record<string, any>;
  layout: Layout;
  [key: string]: any;
};

export type QueryDatasetStatus = keyof typeof GET_DATASET_STATUS;

export type ComponentMode = keyof typeof COMPONENT_MODE;

export type ComponentPluginViewProps<T = any> = {
  id: string;
  data: any;
  config: T;
};

export type ConfigPanelSchema = {
  type: string;
  property: string;
  name: string;
  initialValue?: any;
  children?: ConfigPanelSchema;
  [key: string]: any;
}[];

export type ComponentPlugin<T = any> = {
  title: string;
  type: string;
  icon?: string;
  configPanelSchema: ConfigPanelSchema;
  View: React.ComponentType<ComponentPluginViewProps<T>>;
};

export type ConfigPanelPluginComponentProps = {
  name: string;
  childComponents?: React.ComponentType<ConfigPanelPluginComponentProps>[];
  onChange: (value: any) => void;
  [key: string]: any;
};

export type ConfigPanelPlugin<T = any> = {
  type: string;
  Component: React.ComponentType<ConfigPanelPluginComponentProps & T>;
};