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

import {
  cloudConfigControllerListAvailableClusterVersions,
  cloudConfigControllerListTemplates
} from 'apiClient/services/devops'
import { CloudconfigTemplate } from 'apiClient/services/devops/interface'

export type TenantInitVersionFormType = {
  version: string
  custom_template: number
}

const FollowGlobal: string = 'FOLLOW_GLOBAL'

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

  const getTemplates = async (version: string) => {
    try {
      const resp = (
        await cloudConfigControllerListTemplates({
          cluster_type: 'DEDICATED_TIDB',
          template_type: 'custom',
          version: version
        })
      ).data.items
      setTemplates(resp || [])
    } catch (e) {
      console.error(e)
    }
  }

  useEffect(() => {
    const getInitialVersions = async () => {
      try {
        const resp = (
          await cloudConfigControllerListAvailableClusterVersions(
            'DEDICATED_TIDB'
          )
        ).data.items
        var versionList = resp?.map((v) => v.version!) || []
        versionList.unshift(FollowGlobal)
        setVersions(versionList)
      } catch (e) {
        console.error(e)
      }
    }
    getInitialVersions()
  }, [])

  let templateOptions = templates.map((v) => ({
    label: v.name || '',
    value: v.id || ''
  }))
  templateOptions.unshift({
    label: 'Remain Unchange',
    value: 'unchange'
  })

  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
          }))}
          placeholder="Azure support is only available starting from v7.5.3"
          onChange={(value) => {
            // Extract major.minor version from semver (e.g. "v5.4.0" -> "v5.4")
            const baseVersion =
              value?.toString().split('.').slice(0, 2).join('.') || ''
            getTemplates(baseVersion)
          }}
        />
      </Form.Item>
      <Form.Item
        name="custom_template"
        label={
          <div>
            (optional) Use predefined Custom Template
            <br />
            to overwrite Tenant Init Configs
          </div>
        }
        initialValue={'unchange'}
        rules={[{ required: false }]}
        labelCol={{
          style: {
            maxWidth: 300
          }
        }}
      >
        <Select
          style={{ width: '80%', display: 'flex' }}
          options={templateOptions}
        />
      </Form.Item>
    </>
  )
}

export default TenantInitVersionForm