import { Descriptions, Input, Select } from 'antd'
import React from 'react'

import {
  MAINTENANCE_POLICY_MODE_OPTIONS,
  type UpgradeOperationCrDocument
} from './upgradeOperationCr'

type Props = {
  doc: UpgradeOperationCrDocument | null
  editable?: boolean
  duration?: string
  durationError?: string
  onDurationChange?: (value: string) => void
  maintenancePolicyMode?: string
  maintenancePolicyModeError?: string
  onMaintenancePolicyModeChange?: (value: string) => void
}

export const CrMetadata: React.FC<Props> = ({
  doc,
  editable,
  duration,
  durationError,
  onDurationChange,
  maintenancePolicyMode,
  maintenancePolicyModeError,
  onMaintenancePolicyModeChange
}) => {
  if (!doc) return null

  const durationValue = duration ?? doc.duration ?? ''
  const maintenancePolicyModeValue =
    maintenancePolicyMode ?? doc.maintenancePolicyMode ?? ''

  return (
    <Descriptions size="small" column={2} bordered style={{ marginBottom: 12 }}>
      <Descriptions.Item label="Name">{doc.name || '-'}</Descriptions.Item>
      <Descriptions.Item label="Namespace">
        {doc.namespace || '-'}
      </Descriptions.Item>
      <Descriptions.Item label="Appbox Name">
        {doc.appboxName || '-'}
      </Descriptions.Item>
      <Descriptions.Item label="Schedule">
        {doc.schedule || '-'}
      </Descriptions.Item>
      <Descriptions.Item label="Duration">
        {editable ? (
          <Input
            size="small"
            value={durationValue}
            placeholder="1h2m3s"
            status={durationError ? 'error' : undefined}
            onChange={(event) => onDurationChange?.(event.target.value)}
          />
        ) : (
          durationValue || '-'
        )}
      </Descriptions.Item>
      <Descriptions.Item label="TTL">{doc.ttl || '-'}</Descriptions.Item>
      <Descriptions.Item label="Maintenance Policy Mode">
        {editable ? (
          <Select
            size="small"
            style={{ width: '100%' }}
            value={maintenancePolicyModeValue || undefined}
            placeholder="Select maintenance policy mode"
            status={maintenancePolicyModeError ? 'error' : undefined}
            options={MAINTENANCE_POLICY_MODE_OPTIONS.map((value) => ({
              label: value,
              value
            }))}
            onChange={(value) => onMaintenancePolicyModeChange?.(value)}
            allowClear
          />
        ) : (
          maintenancePolicyModeValue || '-'
        )}
      </Descriptions.Item>
    </Descriptions>
  )
}