import React, { useEffect, useState } from 'react';
import { Form, Input, InputNumber, Select, Tooltip } from 'antd-v4';
import * as commonUtils from "@/utils/utils";
import type { SelectProps } from 'antd-v4';
import type { PropsType, FormItemTypeKey } from './type';

const FormItemTypeEvent = (props: PropsType) => {

  const { showConfig } = props;
  const { sName = "", bNotEmpty } = showConfig;

  const addState: any = {};
  addState.formItemProps = (): any => {
    return {
      style: { margin: 0 },
      name: sName,
      rules: [{ required: bNotEmpty, message: <Tooltip title="此字段必填！"><div>必填</div></Tooltip> }]
    }
  }

  return {
    ...props,
    ...addState,
  }
}

const FormItemType: React.FC<PropsType> = (baseProps): React.ReactElement => {
  const props = FormItemTypeEvent(baseProps);
  const { showConfig } = props;
  const { sName = "", bNotEmpty } = showConfig;
  const firstDataIndex = sName.charAt(0) as FormItemTypeKey;
  const FormItemJson: Record<FormItemTypeKey, JSX.Element> = {
    "s": <FormItemInput {...props} />,
    "i": <FormItemInputNumber {...props} />,
    "d": <FormItemInputNumber {...props} />,
    "t": <FormItemDatePicker {...props} />,
    "b": <FormItemInputCheckbox {...props} />,
  }

  return FormItemJson[firstDataIndex];
}

// 文本框
const FormItemInput: React.FC<PropsType> = (props): React.ReactElement => {
  const { showConfig } = props;

  const { sDropDownType } = showConfig;
  if (["sql", "const"].includes(sDropDownType)) {
    return <FormItemInputSelect {...props} />
  }

  return <Form.Item
    {...props.formItemProps()}
  >
    <Input ref={props.ref} onPressEnter={props.onSave} onBlur={props.onSave} />
  </Form.Item>
}

// 下拉框
const FormItemInputSelect: React.FC<PropsType> = (props): React.ReactElement => {
  const { name, showConfig, record } = props;
  const { sName } = showConfig;
  const [options, setOptions] = useState<any[]>([]);
  const [fieldNames, setFieldNames] = useState<any>(null);
  // 获取下拉数据
  useEffect(() => {
    const { dropDownData, showDropDown, sAssignField } = showConfig;
    const data = dropDownData || (typeof showDropDown === 'object') ? showDropDown : commonUtils.objectToArr(commonUtils.convertStrToObj(showDropDown));
    if (!data?.length) return;

    setOptions(data);

    const data0 = data[0];
    setFieldNames({
      label: Object.keys(data0)[0],
      value: data0.sSlaveId ? 'sSlaveId' : 'sId',
    })
  }, [])

  const selectProps: SelectProps = {
    fieldNames,
    options,
    onChange: (value: any) => {
      props.onChange(name, sName, { [sName]: value }, record.sId, options)
    }
  }

  return <Form.Item
    {...props.formItemProps()}
  >
    <Select {...selectProps} />
  </Form.Item>
}

// 数字框
const FormItemInputNumber: React.FC<PropsType> = (props): React.ReactElement => {
  return <Form.Item
    {...props.formItemProps()}
  >
    <InputNumber ref={props.ref} onPressEnter={props.onSave} onBlur={props.onSave} />
  </Form.Item>
}

// 日期框
const FormItemDatePicker: React.FC<PropsType> = (props): React.ReactElement => {
  return <FormItemInput {...props} />
}

// 复选框
const FormItemInputCheckbox: React.FC<PropsType> = (props): React.ReactElement => {
  return <FormItemInput {...props} />
}


export default FormItemType;