import {
  Form,
  InputNumber,
  Select,
  Button,
  Row,
  Col,
  Input,
  Space,
  Modal
} from 'antd'
import { FormInstance } from 'antd/es/form/Form'
import React, { useState } from 'react'

import { Dedicatedv1ComponentType } from 'apiClient/services/sku/interface'

export type AddSPUFormType = {
  component: Dedicatedv1ComponentType
  vCPUNumber: number
  memorySize: number
  displayName: string
  name: string
}

const SPUPage = ({ form, type }: { form: FormInstance; type: string }) => {
  const handleGenerate = () => {
    const componentValue = form.getFieldValue('component')
    const vCPU = form.getFieldValue('vCPUNumber')
    const memory = form.getFieldValue('memorySize')
    if (
      componentValue === undefined ||
      vCPU === undefined ||
      memory === undefined
    ) {
      Modal.warn({
        title: 'fill the required fields before generating',
        content:
          'Please fill the previous required fields to generate the spu key'
      })
    } else {
      const spu = `${vCPU}C${memory}G:DEPLOY_TYPE_DEDICATED:COMPONENT_TYPE_${componentValue}`
      form.setFieldsValue({ spuKey: spu })
    }
  }

  return (
    <>
      <Form.Item
        label="Component"
        name="component"
        rules={[{ required: true, message: 'Please select a component!' }]}
      >
        <Select
          placeholder="Please select"
          onChange={(v) => form.setFieldsValue({ component: String(v) })}
          options={Object.entries(Dedicatedv1ComponentType).map(
            ([key, value]) => ({
              label: key,
              value: value
            })
          )}
          style={{ width: 150 }}
          disabled={type === 'modify'}
        />
      </Form.Item>
      <Form.Item
        label="vCPU Number"
        name="vCPUNumber"
        rules={[{ required: true, message: 'Please input vCPU number!' }]}
      >
        <InputNumber min={1} placeholder="vCPU" disabled={type === 'modify'} />
      </Form.Item>
      <Form.Item
        label="Memory Size"
        name="memorySize"
        rules={[{ required: true, message: 'Please input memory size!' }]}
      >
        <InputNumber min={1} disabled={type === 'modify'} placeholder="GiB" />
      </Form.Item>

      <Form.Item
        label="Display Name"
        name="displayName"
        rules={[{ required: true, message: 'Please input display name!' }]}
      >
        <Input style={{ width: '100%' }} />
      </Form.Item>
      <Form.Item
        label="Name"
        name="name"
        rules={[{ required: true, message: 'Please input the Spu name!' }]}
      >
        <Input disabled={type === 'modify'} style={{ width: '70%' }} />
      </Form.Item>
    </>
  )
}

export default SPUPage