import {forwardRef, memo, useCallback, useState} from 'react';
import {ProForm, ProFormSelect} from "@ant-design/pro-components";
import {request} from "../../../../utils/request";
import useI18NPrefix from "../../../hooks/useI18NPrefix";

const component = forwardRef(({
  initialValues,
  onFinish,
  submitter,
  options
},ref) => {
  const t = useI18NPrefix('global');
  // 数据源ID 数据库名 表名
  const [targetField, setTargetField] = useState([]);

  const onTargetTableChange = useCallback(async (tableName)=>{
    ref?.current?.setFieldsValue({targetFields: null})
    const { data } = await request({
      url: `/semantic/database/getColumns/${options?.sourceId}/${options?.db}/${tableName}`,
      method: "GET",
    })
    setTargetField(data)
  },[])

  const handleFinish=(values)=>{
    const margeTable = {...values,insertFields:targetField}
    onFinish(margeTable)
  }
  return (
    <ProForm
      // initialValues={{sourceTable:"1",sourceFields:"2",targetTable:"3",targetFields:"4"}}
      initialValues={initialValues}
      formRef={ref}
      style={{width:500}}
      labelCol={{span:6}}
      wrapperCol={{span:16}}
      layout='horizontal'
      submitter={submitter}
      onFinish={handleFinish}
    >
      <ProFormSelect
        name="sourceTable"
        label={t("formItem.sourceTable")}
        placeholder={t("placeholder.select")+t("formItem.sourceTable")}
        disabled={true}
        rules={[{ required: true }]}
        options={[options.sourceTable]}
        initialValue={options.sourceTable.value}
      />
      <ProFormSelect
        name="sourceFields"
        label={t("formItem.sourceFields")}
        placeholder={t("placeholder.select")+t("formItem.sourceTable")}
        showSearch
        rules={[{ required: true }]}
        options={options.sourceFields}
      />
      <ProFormSelect
        name="targetTable"
        label={t("formItem.targetTable")}
        placeholder={t("placeholder.select")+t("formItem.targetTable")}
        rules={[{ required: true }]}
        showSearch
        options={options.targetTable}
        onChange={onTargetTableChange}
      />
      <ProFormSelect
        name="targetFields"
        label={t("formItem.targetFields")}
        placeholder={t("placeholder.select")+t("formItem.targetFields")}
        showSearch
        rules={[{ required: true }]}
        options={targetField.map(item=>({
          label:item.columnName,
          value:item.columnName,
        }))}
      />
      <ProFormSelect
        name="joinType"
        label={t("formItem.joinType")}
        placeholder={t("placeholder.select")+t("formItem.joinType")}
        rules={[{ required: true }]}
        valueEnum={{
          leftJoin:'左连接',
          rightJoin:'右连接',
          innerJoin:'内连接',
        }}
      />
      <ProFormSelect
        name="queryFields"
        label={t("formItem.queryFields")}
        placeholder={t("placeholder.select")+t("formItem.queryFields")}
        showSearch
        rules={[{ required: true }]}
        fieldProps={{
          mode: 'multiple',
          maxTagCount:'responsive',
        }}
        options={
          targetField.map(item=>({
            label:item.columnName,
            value:JSON.stringify(item),
          }))
        }
      />
    </ProForm>
  )
})
export const RelationForm = memo(component);
