import { PropType } from 'vue';
import type { VNode } from 'vue';
import type { FDHighLightType, FDNodeConfig } from './index';
import type { PropertyPanelMode } from '../ui/property-panel/types';

export const IngeniousFlowDesignerProps = {
  value: {
    type: Object as PropType<any>,
    default: () => ({})
  },
  highLight: {
    type: Object as PropType<FDHighLightType>,
    default: () => ({
      history_node_names: [],
      history_edge_names: [],
      active_node_names: []
    })
  },
  nodeConfig: {
    type: Array as PropType<FDNodeConfig[]>,
    default: () => []
  },
  viewer: {
    type: Boolean as PropType<boolean>,
    default: false
  },
  width: {
    type: [String, Number] as PropType<string | number>,
    default: '100%'
  },
  height: {
    type: [String, Number] as PropType<string | number>,
    default: '100%'
  },
  theme: {
    type: String as PropType<'default' | 'dark'>,
    default: 'default'
  },
  initDndPanel: {
    type: Boolean as PropType<boolean>,
    default: true
  },
  dndPanel: {
    type: Array as PropType<Array<any>>,
    default: () => []
  },
  initControl: {
    type: Boolean as PropType<boolean>,
    default: true
  },
  control: {
    type: Array as PropType<Array<any>>,
    default: () => []
  },
  nodeClick: {
    type: Function as PropType<(event: any) => void>,
    default: null
  },
  edgeClick: {
    type: Function as PropType<(event: any) => void>,
    default: null
  },
  blankContextmenu: {
    type: Function as PropType<(event: any) => void>,
    default: null
  },
  drawerWidth: {
    type: [String, Number] as PropType<string | number>,
    default: '600px'
  },
  modalWidth: {
    type: [String, Number] as PropType<string | number>,
    default: '60%'
  },
  processForm: {
    type: Object as PropType<FDFormType>
  },
  edgeForm: {
    type: Object as PropType<FDFormType>
  },
  defaultEdgeType: {
    type: String as PropType<string>,
    default: 'transition'
  },
  typePrefix: {
    type: String as PropType<string>,
    default: 'ingenious:'
  }
};

export interface FDFormItemType {
  name: string;
  label?: string;
  component?: 'Input' | 'Select' | 'DatePicker' | 'InputNumber' | 'Switch' | 'Checkbox' | 'CheckboxGroup' | 'Radio' | 'RadioGroup' | 'Textarea' | 'Slider';
  render?: (args: any) => VNode;
  componentProps?: any;
  slot?: string;
  helpMessage?: string | Array<string>;
  formItemProps?: any;
}

export interface FDFormType {
  labelWidth?: string;
  formItems: Array<FDFormItemType>;
}