import { FormInstance, Form, Typography, Tag, InputNumber } from 'antd'
import React, { useCallback, useState } from 'react'

import {
  ClusterGetClusterComponentsResp,
  ClusterGetClusterResp,
  OperationOperationTarget
} from '../../../../../apiClient/services/devops/interface'
import ModalForm from '../../../../../components/ModalForm'
import CreateInstanceForm, {
  AppendCategoryFromDeployType,
  CreateInstanceFormType
} from '../../../../Devops/Operations/Forms/CreateInstanceForm'
const itemStyle = { marginBottom: '0.5em' }

interface ComponentScaleInfo {
  component_type: string
  node_profile_name?: string
  storage_size_gi: number
  tidb_group_id?: string
  replicas: number
}

export default function ScaleComponentOperation({
  componentType,
  components,
  cluster,
  cluster_id,
  onScaleOperation,
  reload
}: {
  componentType: string
  components: ClusterGetClusterComponentsResp
  cluster: ClusterGetClusterResp
  cluster_id: string
  onScaleOperation: (payload: CreateInstanceFormType) => Promise<void> | void
  reload: () => Promise<void>
}) {
  const [scaleForm, setScaleForm] = useState(false)
  const [createOperationForm, setCreateOperationForm] = useState(false)

  const [scaleInfo, setScaleInfo] = useState<string>(``)
  // const hasTiFlash = tiflash && tiflash.length
  const { pd = [], tikv = [], tidb = [], tiflash = [] } = components
  const is4cCluster = tidb?.[0]?.cpu_num === 4

  const renderFormFields = (form: FormInstance) => {
    if (componentType == 'TiDB') {
      return tidb.map((info, infoIndex) => {
        const groupLabel = info.tidb_group_display_name || info.tidb_group_id
        return (
          <div
            key={`${componentType}-${info.tidb_group_id}`}
            style={{ marginBottom: 16 }}
          >
            <Typography.Text strong>
              {componentType} - {groupLabel}
            </Typography.Text>
            <Form.Item label="Group ID" style={itemStyle}>
              <Tag>{info.tidb_group_id || '-'}</Tag>
            </Form.Item>
            <Form.Item label="vCPUs Size" style={itemStyle}>
              <Tag>{info.spu_display_name || '-'}</Tag>
            </Form.Item>
            <Form.Item
              name={['components', 'tidb', info.tidb_group_id!, 'count']}
              label="Node Quantity"
              style={itemStyle}
              initialValue={info.count}
              rules={[
                { required: true, message: 'Please input node quantity' }
              ]}
            >
              <InputNumber min={1} max={is4cCluster ? 2 : 128} step={1} />
            </Form.Item>
          </div>
        )
      })
    }
    if (componentType == 'TiKV') {
      return (
        <div key={`${componentType}`} style={{ marginBottom: 16 }}>
          <Typography.Text strong>{componentType}</Typography.Text>

          <Form.Item label="vCPUs Size" style={itemStyle}>
            <Tag>{tikv?.[0]?.spu_display_name || '-'}</Tag>
          </Form.Item>
          <Form.Item label="Storage Size" style={itemStyle}>
            <Tag>{tikv?.[0]?.storages?.['data']?.size_gi || '-'}</Tag>
          </Form.Item>
          <Form.Item
            name={['components', 'tikv', 'count']}
            label="Node Quantity"
            style={itemStyle}
            initialValue={tikv?.[0]?.count}
            rules={[{ required: true, message: 'Please input node quantity' }]}
          >
            <InputNumber min={3} max={128} step={3} disabled={is4cCluster} />
          </Form.Item>
        </div>
      )
    }
  }

  const onScaleModalSubmit = async (values: any) => {
    let componentsInfo: ComponentScaleInfo[] = []

    const { components = {} } = values // 从统一的 components 字段获取数据

    if (componentType === 'TiDB' && components.tidb) {
      Object.entries(components.tidb).forEach(
        ([tidbGroupId, groupInfo]: [string, any]) => {
          const originalTidbInfo = tidb.find(
            (t) => t.tidb_group_id === tidbGroupId
          )
          if (originalTidbInfo) {
            componentsInfo.push({
              component_type: 'COMPONENT_TYPE_TIDB',
              node_profile_name: originalTidbInfo.spu_name,
              storage_size_gi: 0,
              tidb_group_id: tidbGroupId,
              replicas: groupInfo.count
            })
          }
        }
      )
    } else if (componentType === 'TiKV' && components.tikv) {
      const tikvCount = components.tikv.count
      if (tikvCount !== undefined && tikv.length > 0) {
        tikv.forEach((tikvInfo) => {
          componentsInfo.push({
            component_type: 'COMPONENT_TYPE_TIKV',
            node_profile_name: tikvInfo.spu_name,
            storage_size_gi: tikvInfo.storages?.data?.size_gi || 0,
            tidb_group_id: tikvInfo.tidb_group_id,
            replicas: tikvCount
          })
        })
      }
    }
    setScaleInfo(JSON.stringify({ components: componentsInfo }))
    setScaleForm(false)
    setCreateOperationForm(true)
  }

  const onScaleModalClose = useCallback(() => {
    setScaleForm(false)
  }, [])

  const handleSubmit = (payload: CreateInstanceFormType) => {
    setCreateOperationForm(false)
    return onScaleOperation(payload)
  }

  const handleCancelCreate = useCallback(() => {
    setCreateOperationForm(false)
    if (reload) {
      reload()
    }
  }, [])

  const renderScaleFormFields = useCallback(
    (form: FormInstance) => {
      return (
        <CreateInstanceForm
          form={form}
          target_type={OperationOperationTarget.cluster}
          target_id={cluster_id}
          init_categories={AppendCategoryFromDeployType(
            [],
            cluster.deploy_type
          )}
          op={`scale`}
          json={scaleInfo}
        />
      )
    },
    [createOperationForm]
  )

  const buildInitialValues = () => {
    const initialValues = {
      components: {} as any
    }

    if (componentType === 'TiDB') {
      initialValues.components.tidb = {}
      tidb.forEach((info) => {
        if (info.tidb_group_id) {
          initialValues.components.tidb[info.tidb_group_id] = {
            count: info.count
          }
        }
      })
    } else if (componentType === 'TiKV') {
      initialValues.components.tikv = {
        count: tikv?.[0]?.count
      }
    }

    return initialValues
  }

  const initValues = buildInitialValues()

  return (
    <div>
      <a
        onClick={() => {
          setScaleForm(true)
        }}
        style={{
          display: 'block',
          width: '100%',
          textAlign: 'left'
        }}
      >
        Scale {componentType}
      </a>
      <ModalForm<any>
        visible={scaleForm}
        name="scale_cluster_components"
        title="Scale Cluster Components"
        initValues={initValues}
        getFields={renderFormFields}
        onSubmit={onScaleModalSubmit}
        onCancel={onScaleModalClose}
        okText="Next"
      />
      <ModalForm<CreateInstanceFormType>
        visible={!!createOperationForm}
        name="user"
        title={'Create Operation'}
        getFields={renderScaleFormFields}
        onSubmit={handleSubmit}
        onCancel={handleCancelCreate}
        width={1000}
        destoryOnClose={true}
      />
    </div>
  )
}