import { Form, Input, Select } from 'antd'
import { useEffect, useState } from 'react'

import { cloudConfigControllerListAvailableComponentVersions } from 'apiClient/services/devops'

const FollowGlobal: string = 'FOLLOW_GLOBAL'

const TenantInitDMVersionForm = ({ current }: { current?: string }) => {
  const [versions, setVersions] = useState<string[] | undefined>([])

  useEffect(() => {
    const getInitialVersions = async () => {
      try {
        const resp = (
          await cloudConfigControllerListAvailableComponentVersions(
            'data-migration'
          )
        ).data
        var versionList = resp?.versions || []
        versionList.unshift(FollowGlobal)
        setVersions(versionList)
      } catch (e) {
        console.error(e)
      }
    }
    getInitialVersions()
  }, [])

  return (
    <>
      {current !== undefined && (
        <Form.Item name="curVersion" label="Current Default Version">
          <Input disabled={true} bordered={false} style={{ color: 'black' }} />
        </Form.Item>
      )}
      <Form.Item
        name="version"
        label="Target Default Version"
        rules={[{ required: true }]}
      >
        <Select
          style={{ width: '80%', display: 'flex' }}
          options={versions?.map((v) => ({
            label: v,
            value: v
          }))}
        />
      </Form.Item>
    </>
  )
}

export default TenantInitDMVersionForm