export interface ComponentConfig {
  id?: string; // 唯一標(biāo)識，隨機(jī)生成，且不可更改
  key: string; // 表單字段key，用戶可以更改
  title: string; // 拖拽區(qū)域的文案，不可更改
  component_type: ComponentType; // RN側(cè)的組件標(biāo)識，不可更改
  schema: ISchema;
}
export enum ComponentType {
  TextInputRow = 'TextInputRow', // 文本輸入框
  DateInputRow = 'DateInputRow', // 時間選擇器
  CheckBox = 'CheckBox',
}

export const ComponentConfigs: ComponentConfig[] = [
  {
    key: ComponentType.TextInputRow,
    schema: {
      title: ComponentType.TextInputRow,
      type: 'string',
      'x-component': 'Input',
      'x-decorator': 'FormItem',
      'x-rn-component': ComponentType.TextInputRow, // RN側(cè)的組件名稱，必須要保持一致
    },
  },
  {
    key: ComponentType.DateInputRow,
    schema: {
      title: ComponentType.DateInputRow,
      type: 'string',
      'x-component': 'DatePicker',
      'x-decorator': 'FormItem',
      'x-rn-component': ComponentType.DateInputRow,
    },
  },
  {
    key: ComponentType.CheckBox,
    schema: {
      title: ComponentType.CheckBox,
      type: 'string',
      'x-component': 'Checkbox',
      'x-decorator': 'FormItem',
      'x-rn-component': ComponentType.CheckBox,
    },
  },
].map((i) => ({ ...i, title: i.key, component_type: i.key }));

// 用于包裹每一個可以拖拽的組件
export const WrapComponent = (props: DndComponentDndItem) => {
  const [, drag] = useDrag(() => ({
    type: ItemTypes.CARD,
    item: props.config,
    // collect中可以監(jiān)控drag狀態(tài)變更，并把狀態(tài)暴露給組件
    collect: (monitor) => ({ isDragging: !!monitor.isDragging() }),
  }));
  return (
    <div
      style={{
        width: 100, // todo: 卡片無法居中
        cursor: 'move',
        height: 50,
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'white',
        borderRadius: 4,
      }}
      ref={drag} // dom元素實(shí)例
    >
      {props.children}
    </div>
  );
};