import {forwardRef, memo, useImperativeHandle, useRef} from 'react';
import {Button} from "antd";
import {SelectModal} from "../../../components/SelectModal";
import {ProFormSelect, ProFormText, QueryFilter} from "@ant-design/pro-components";
import {FORM_TYPE, INDEX_TYPE, PUBLISH_STATUS, SENSITIVE} from "../constants";
import {STATUS_TYPE} from "../../../constants";
import useI18NPrefix from "../../../hooks/useI18NPrefix";

const component = forwardRef(({
  onModelSelect,
  onFinish
},ref) => {
  const t = useI18NPrefix('global');
  const selectComp = useRef(null)
  const modalTypeOption = [
    {...FORM_TYPE.ATOMIC, icon: true},
    {...FORM_TYPE.DERIVED, icon: true},
    {...FORM_TYPE.COMPOSITE, icon: true},
  ]
  useImperativeHandle(ref, () => ({
    onModelSelectOpen(){
      selectComp.current.onModelSelectOpen();
    }
  }));
  return (
    <QueryFilter
      defaultCollapsed
      labelWidth={0}
      onFinish={onFinish}
      submitter={{
        render: (props, doms) => {
          return [
            doms[1],
            // <Button htmlType="button" onClick={()=>{}} key="edit">
            //   {t("button.export")}
            // </Button>,
            <SelectModal
              key="selectModal"
              title={t("title.establishingMode")}
              description={t("placeholder.establishingMode")}
              options={modalTypeOption}
              onSelect={onModelSelect}
              ref={selectComp}
              buttonProps={{
                children:t("button.metricCreate"),
                style:{
                  backgroundColor:"#fa8c16"
                }
              }}
            />
          ]},
      }}
    >
      <ProFormText name="name" placeholder={t("formItem.metricName")}/>
      <ProFormSelect
        name="type"
        valueEnum={INDEX_TYPE}
        placeholder={t("formItem.metricType")}
      />
      <ProFormSelect
        name="sensitiveLevel"
        valueEnum={SENSITIVE}
        placeholder={t("formItem.sensitiveLevel")}
      />
      <ProFormSelect
        name="status"
        valueEnum={STATUS_TYPE}
        placeholder={t("formItem.status")}
      />
      <ProFormSelect
        name="isPublish"
        valueEnum={PUBLISH_STATUS}
        placeholder={t("formItem.publish")}
      />
    </QueryFilter>
  )
})
export const IndexFilterForm=memo(component)
