import { Form, Input, Select } from 'antd'
import TextArea from 'antd/lib/input/TextArea'
import { FormInstance } from 'rc-field-form'
import { useEffect } from 'react'

import {
  CloudconfigParameterApplyPolicy,
  CloudconfigRiskLevel,
  CloudconfigClusterType
} from 'apiClient/services/devops/interface'
import {
  IsBool,
  IsFloat,
  IsInt,
  IsJson
} from 'pages/Tenants/ClusterDetail/Configs/Forms/EditParamForm'

export type ModifyConfigFormType = {
  cluster_type: CloudconfigClusterType
  apply_policy: CloudconfigParameterApplyPolicy
  param_name: string
  version: string
  configType: string
  type: string
  default_value: string
  validation: string
  risk_level: CloudconfigRiskLevel
}

function ModifyConfigForm({ form }: { form: FormInstance }) {
  return (
    <>
      <Form.Item label="Cluster Type" name="cluster_type" required={true}>
        <Input disabled={true}></Input>
      </Form.Item>
      <Form.Item label="Config Type" name="configType" required={true}>
        <Input disabled={true}></Input>
      </Form.Item>
      <Form.Item label="Config Name" name="param_name" required={true}>
        <Input disabled={true}></Input>
      </Form.Item>
      <Form.Item label="Version" name="version" required={true}>
        <Input disabled={true}></Input>
      </Form.Item>
      <Form.Item label="Type" name="type" required={true}>
        <Input disabled={true}></Input>
      </Form.Item>
      <Form.Item
        label="Default Value"
        name="default_value"
        rules={
          form.getFieldValue(['type']) === 'int'
            ? [
                {
                  validator: async (_, value) => {
                    if (!IsInt(value)) {
                      return Promise.reject(
                        new Error('the input should be an int')
                      )
                    }
                  }
                },
                {
                  required: true,
                  message: 'new value is required'
                }
              ]
            : form.getFieldValue(['type']) === 'float'
            ? [
                {
                  validator: async (_, value) => {
                    if (!IsFloat(value)) {
                      return Promise.reject(
                        new Error('the input should be float')
                      )
                    }
                  }
                },
                {
                  required: true,
                  message: 'new float value is required'
                }
              ]
            : form.getFieldValue(['type']) === 'bool'
            ? [
                {
                  validator: async (_, value) => {
                    if (!IsBool(value)) {
                      return Promise.reject(
                        new Error('the input should be bool')
                      )
                    }
                  }
                },
                {
                  required: true,
                  message: 'new value is required'
                }
              ]
            : form.getFieldValue(['type']) === 'json'
            ? [
                {
                  validator: async (_, value) => {
                    if (!IsJson(value)) {
                      return Promise.reject(
                        new Error('the input should be json format')
                      )
                    }
                  }
                },
                {
                  required: true,
                  message: 'new value is required'
                }
              ]
            : [
                {
                  required: true,
                  message: 'new value is required'
                }
              ]
        }
      >
        <TextArea
          style={{ width: '50%' }}
          autoSize
          placeholder='"" is not required for string. DO NOT support edit LONG'
          defaultValue={form.getFieldValue(['default_value'])}
        ></TextArea>
      </Form.Item>
      <Form.Item label="Validation" name="validation" required={false}>
        <Input></Input>
      </Form.Item>
      <Form.Item label="Risk Level" name="risk_level" required={true}>
        <Select
          options={[
            {
              label: 'Low',
              value: 'low'
            },
            {
              label: 'High',
              value: 'high'
            }
          ]}
        ></Select>
      </Form.Item>
      <Form.Item label="Apply Policy" name="apply_policy" required={true}>
        <Select
          options={[
            {
              label: CloudconfigParameterApplyPolicy.HotReload,
              value: CloudconfigParameterApplyPolicy.HotReload
            },
            {
              label: CloudconfigParameterApplyPolicy.RollingRestart,
              value: CloudconfigParameterApplyPolicy.RollingRestart
            }
          ]}
        ></Select>
      </Form.Item>
    </>
  )
}

export default ModifyConfigForm