import ListInput from '@/components/list-input';
import SealInput from '@/components/seal-form/seal-input';
import SealTextArea from '@/components/seal-form/seal-textarea';
import { PageAction } from '@/config';
import { PageActionType } from '@/config/types';
import useAppUtils from '@/hooks/use-app-utils';
import { useIntl } from '@umijs/max';
import { Form } from 'antd';
import React from 'react';
import { FormData, ListItem } from '../config/types';

type AddModalProps = {
  action: PageActionType;
  currentData?: ListItem;
};
const BasicForm: React.FC<AddModalProps> = ({ action, currentData }) => {
  const form = Form.useFormInstance();
  const intl = useIntl();
  const { getRuleMessage } = useAppUtils();

  return (
    <>
      <Form.Item<FormData>
        name="backend_name"
        rules={[
          {
            required: true,
            message: getRuleMessage('input', 'common.table.name')
          }
        ]}
      >
        <SealInput.Input
          trim
          addAfter={currentData?.is_built_in ? null : '-custom'}
          disabled={action === PageAction.EDIT}
          label={intl.formatMessage({ id: 'common.table.name' })}
          required
        ></SealInput.Input>
      </Form.Item>
      {!currentData?.is_built_in && (
        <>
          <Form.Item<FormData>
            name="health_check_path"
            rules={[{ required: false }]}
          >
            <SealInput.Input
              trim
              placeholder={`/v1/models`}
              label={intl.formatMessage({ id: 'backend.form.healthCheckPath' })}
            ></SealInput.Input>
          </Form.Item>
          <Form.Item name="default_run_command">
            <SealTextArea
              scaleSize={false}
              alwaysFocus={true}
              description={intl.formatMessage({
                id: 'backend.form.defaultExecuteCommand.tips'
              })}
              placeholder={intl.formatMessage(
                { id: 'common.help.eg' },
                {
                  content:
                    'vllm serve {{model_path}} --port {{port}} --host {{worker_ip}} --served-model-name {{model_name}}'
                }
              )}
              autoSize={{ minRows: 2, maxRows: 4 }}
              label={intl.formatMessage({
                id: 'backend.form.defaultExecuteCommand'
              })}
            ></SealTextArea>
          </Form.Item>
        </>
      )}
      <Form.Item<FormData>
        name="default_backend_param"
        rules={[{ required: false }]}
      >
        <ListInput
          dataList={form.getFieldValue('default_backend_param') || []}
          onChange={(data: string[]) => {
            form.setFieldValue('default_backend_param', data);
          }}
          btnText={intl.formatMessage({ id: 'backend.form.addParameter' })}
          label={intl.formatMessage({
            id: 'backend.form.defaultBackendParameters'
          })}
        ></ListInput>
      </Form.Item>

      <Form.Item<FormData> name="description" rules={[{ required: false }]}>
        <SealInput.TextArea
          scaleSize={true}
          label={intl.formatMessage({ id: 'common.table.description' })}
        ></SealInput.TextArea>
      </Form.Item>
    </>
  );
};

export default BasicForm;
