import {memo, useCallback, useRef} from 'react';
import {ProForm, ProFormDatePicker, ProFormSelect, ProFormText} from "@ant-design/pro-components";
import {styled} from "styled-components";
import {Col, Row, Table} 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";
import useI18NPrefix from "../../../hooks/useI18NPrefix";
import {formatColumns} from "../../../components/ChartsGraph/utils";
import {pinyin} from "pinyin-pro";

const fieldWidth = 450;
export const SqlStartStep = memo(({
  initialValues,
  onEditorChange,
  onSetField,
  columns,
  data,
  sql,
}) => {
  const t = useI18NPrefix('global');
  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}))
    }
  },[])

  const onNameChange = useCallback((e)=>{
    if (!initialValues){
      const py = pinyin(e.target.value, { toneType: "none", type: "array" });
      let pingYin = "";
      py.forEach(p=>pingYin+=p[0].toUpperCase());
      onSetField("bizName",pingYin)
    }
  },[])

  /** sql表头*/
  const formatColumn = formatColumns(columns)
  return (
    <div style={{height: 850}}>
      <ProForm.Group>
        <ProFormSelect
          name="dbSource"
          label={t("formItem.datasource")}
          placeholder={t("placeholder.datasource")}
          width={fieldWidth}
          rules={[{ required: true }]}
          disabled={initialValues}
          initialValue={initialValues?.datasourceId}
          onChange={getDBbySourceId}
          options={dbSource}
        />
        <ProFormSelect
          name="db"
          label={t("formItem.db")}
          placeholder={t("placeholder.db")}
          showSearch
          width={fieldWidth}
          rules={[{ required: true }]}
          disabled={initialValues}
          initialValue={initialValues?.dbName}
          onChange={getTableByDBName}
          options={dbList}
        />
      </ProForm.Group>
      <ProForm.Group>
        <ProFormText
          name="name"
          label={t("formItem.model")+t("formItem.name")}
          placeholder={t("placeholder.modelName")}
          width={fieldWidth}
          rules={[{ required: true }]}
          onChange={onNameChange}
          initialValue={initialValues?.name}
        />
        <ProFormText
          name="bizName"
          label={t("formItem.bizName")}
          placeholder={t("placeholder.bizName")}
          width={fieldWidth}
          rules={[{ required: true }]}
          disabled={initialValues}
          initialValue={initialValues?.bizName}
        />
      </ProForm.Group>
      <ProForm.Group>
        <ProFormText
          name="description"
          label={t("formItem.model")+t("formItem.desc")}
          placeholder={t("placeholder.description")}
          width={fieldWidth}
          initialValue={initialValues?.description}
        />
        <ProFormDatePicker name="startDate" label={t("formItem.startDate")} width={fieldWidth} initialValue={initialValues?.startDate}/>
      </ProForm.Group>
      <Row>
        <Col span={2}>
          <CardLabel children={t("formItem.relation")+":"}/>
        </Col>
        <Col span={22}>
          <CodeEditor value={sql} onEditorChange={onEditorChange} height={formatColumn.length>0?200:600}/>
          {
            formatColumn.length>0 &&
            <CustomTable
              scroll={{y:370,x:formatColumn.length>6?1800:0}}
              style={{height:400,width:'100%'}}
              pagination={{pageSize: 10}}
              columns={formatColumn}
              dataSource={data}
              bordered
            />
          }
        </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: "*";
    }
  }
`

const CustomTable = styled(Table)`
 &.ant-table-wrapper .ant-table {
   scrollbar-color:unset;
 }
`;
