import {ProForm, ProFormDatePicker, ProFormDependency, ProFormSelect, ProFormText} from "@ant-design/pro-components";
import useI18NPrefix from "../../hooks/useI18NPrefix";
import {useRef} from "react";
import {DIM_TYPE_ENUM, DIM_TYPE_OPTION} from "../../constants";
import {DateFormat} from "../ModalManage/constants";

export const DimensionForm = ({
  initialValues,
  onFinish
}) => {
  const t = useI18NPrefix('global');
  const formRef = useRef();
  const formLayoutType = "horizontal";
  const onHandelFinish = (value)=>{
    onFinish({
      id:initialValues?.id,
      typeEnum: "DIMENSION",
      semanticType: "CATEGORY",
      ...value
    })
  }
  return (
    <ProForm
      formRef={formRef}
      initialValues={initialValues}
      layout={formLayoutType}
      onFinish={onHandelFinish}
      labelCol={{ span: 4 }}
      wrapperCol={{ span: 18 }}
      submitter={{
        submitButtonProps: {
          style:{
            marginLeft:20,
            marginTop:20
          }
        },
        resetButtonProps: {
          style:{
            marginTop:20,
            marginLeft:'45%'
          }
        }
      }}
    >
      <ProFormSelect
        name="type"
        label={t("formItem.type")}
        placeholder={t("placeholder.select")+t("formItem.type")}
        rules={[{ required: true }]}
        valueEnum={DIM_TYPE_OPTION}
      />
      <ProFormText
        name="name"
        label={t("formItem.name")}
        rules={[{ required: true }]}
      />
      <ProFormText
        name="bizName"
        label={t("formItem.bizName")}
        rules={[{ required: true }]}
      />
      <ProFormText
        name="description"
        label={t("formItem.description")}
        placeholder={t("placeholder.description")}
      />
      <ProFormText
        name="expr"
        label={t("formItem.expr")}
        placeholder={t("placeholder.expr")}
        rules={[{ required: true }]}
      />
      <ProFormDependency name={["type"]}>
        {
          ({ type }) => type==="time" &&
            <ProFormSelect
              name="dateFormat"
              label={t("formItem.dateFormat")}
              placeholder={t("placeholder.dateFormat")}
              initialValue={initialValues.ext['time_format']}
              options={DateFormat}
            />
        }
      </ProFormDependency>

      <ProFormDatePicker name="startDate" label={t("formItem.startDate")} rules={[{ required: true }]} width="100%" initialValue={initialValues?.createdAt||new Date()}/>
      <ProFormDatePicker name="stopDate" label={t("formItem.stopDate")} width="100%"/>
    </ProForm>
  )
}