import {memo, useCallback, useRef} from 'react';
import {ProForm, ProFormDatePicker, ProFormSelect, ProFormText} from "@ant-design/pro-components";
import {styled} from "styled-components";
import {Col, Row} from "antd";
import {CodeEditor} from "../../../components/CodeEditor";
import {getDBList, getTableList} from "../../MainPage/slice/thunks";
import {useAppDispatch, useAppSelector} from "../../../../redux/configureStore";
import {selectDBList, selectDBSource} from "../../MainPage/slice/selectors";

const fieldWidth = 450;
export const SqlStartStep = memo(({
  initialValues,
  onEditorChange,
  sql
}) => {
  const dispatch = useAppDispatch();
  /** 数据源 */
  const dbSource = useAppSelector(selectDBSource);
  /** 数据库 */
  const dbList = useAppSelector(selectDBList);

  const computeRef = useRef({
    db:null,
    sourceId:null,
    tableName:null,
  });
  /** 根据数据源ID获取数据库 */
  const getDBbySourceId = useCallback((sourceId)=>{
    if (sourceId){
      computeRef.current.sourceId=sourceId
      dispatch(getDBList({sourceId}))
    }
  },[])

  /** 根据数据源ID获取数据库 */
  const getTableByDBName = useCallback((db)=>{
    if (db){
      computeRef.current.db=db
      const {sourceId} = computeRef.current
      dispatch(getTableList({sourceId,db}))
    }
  },[])
  return (
    <div style={{height: 850}}>
      <ProForm.Group>
        <ProFormSelect
          label="数据源"
          name="dbSource"
          placeholder="请选择数据源"
          width={fieldWidth}
          rules={[{ required: true }]}
          disabled={initialValues}
          initialValue={initialValues?.datasourceId}
          onChange={getDBbySourceId}
          options={dbSource}
        />
        <ProFormSelect
          name="db"
          label="数据库"
          showSearch
          placeholder="请选择数据库"
          width={fieldWidth}
          rules={[{ required: true }]}
          disabled={initialValues}
          initialValue={initialValues?.dbName}
          onChange={getTableByDBName}
          options={dbList}
        />
      </ProForm.Group>
      <ProForm.Group>
        <ProFormText
          name="bizName"
          label="业务名称"
          placeholder="请设置英文名称"
          width={fieldWidth}
          rules={[{ required: true }]}
          disabled={initialValues}
          initialValue={initialValues?.bizName}
        />
        <ProFormText
          name="name"
          label="模型名称"
          placeholder="请输入模型名称"
          width={fieldWidth}
          rules={[{ required: true }]}
          initialValue={initialValues?.name}
        />
      </ProForm.Group>
      <ProForm.Group>
        <ProFormText
          label="模型描述"
          name="description"
          placeholder="请输入模型的描述"
          width={fieldWidth}
          initialValue={initialValues?.description}
        />
        <ProFormDatePicker name="startDate" label="生效日期" width={fieldWidth} initialValue={initialValues?.startDate}/>
      </ProForm.Group>
      <Row>
        <Col span={2}>
          <CardLabel children="关联关系:"/>
        </Col>
        <Col span={22}>
          <CodeEditor value={sql} onEditorChange={onEditorChange}/>
        </Col>
      </Row>

    </div>
  )
})
const CardLabel = styled.label`
  margin-left: 30px;
  &.required {
    // 添加必填红色*的样式
    &::before {
      display: inline-block;
      margin-inline-end: 4px;
      color: #ff4d4f;
      font-size: 14px;
      font-family: SimSun, sans-serif;
      line-height: 1;
      content: "*";
    }
  }
`
