import { type } from 'os'

import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons'
import { Form, Input, Checkbox, DatePicker, Button, InputNumber } from 'antd'
import { Moment } from 'moment'

export type MaintenanceForm = {
  project_id: string
  deadline: Moment
  description: string
  cluster_ids: [string]
}

const CreateMaitenanceForm = () => {
  return (
    <>
      <Form.Item
        name="project_id"
        label="Project ID"
        rules={[
          { required: true },
          {
            pattern: /^[0-9]*$/,
            message: 'Please input pure number project id'
          }
        ]}
      >
        <Input />
      </Form.Item>
      <Form.Item name="deadline" label="Deadline" rules={[{ required: true }]}>
        <DatePicker showTime />
      </Form.Item>
      <Form.Item name="description" label="description">
        <Input />
      </Form.Item>
      <Form.Item name="clusters" label="Cluster IDs">
        <Form.List
          name="cluster_ids"
          rules={[
            {
              validator: async (_, names) => {
                if (!names || names.length < 1) {
                  return Promise.reject(
                    new Error('At least 1 cluster should be added')
                  )
                }
              }
            }
          ]}
        >
          {(fields, { add, remove }, { errors }) => (
            <>
              {fields.map((field, index) => (
                <Form.Item required={false} key={field.key}>
                  <Form.Item
                    {...field}
                    validateTrigger={['onChange', 'onBlur']}
                    rules={[
                      {
                        required: true,
                        whitespace: true,
                        message: 'Please input cluster id or delete this field.'
                      },
                      {
                        pattern: /^[0-9]*$/,
                        message: 'Please input pure-number cluster id'
                      }
                    ]}
                    noStyle
                  >
                    <Input placeholder="cluster id" style={{ width: '60%' }} />
                  </Form.Item>
                  {fields.length > 1 ? (
                    <MinusCircleOutlined
                      className="dynamic-delete-button"
                      onClick={() => remove(field.name)}
                    />
                  ) : null}
                </Form.Item>
              ))}
              <Form.Item>
                <Button
                  type="dashed"
                  onClick={() => add()}
                  style={{ width: '60%' }}
                  icon={<PlusOutlined />}
                >
                  Add field
                </Button>
                <Form.ErrorList errors={errors} />
              </Form.Item>
            </>
          )}
        </Form.List>
      </Form.Item>
    </>
  )
}

export default CreateMaitenanceForm