import { Alert, Button, Divider, Group } from '@tidbcloud/uikit'
import { IconXCircle } from '@tidbcloud/uikit/icons'
import { observer } from 'mobx-react'
import { useMemo } from 'react'
import { useFormContext } from 'react-hook-form'

import { useDatabaseAuditLogServiceUpdateAuditLogConfig } from 'dbaas/services/db-audit-log/serverless'
import { AuditLogConfig, CloudStorageTypeEnum } from 'dbaas/services/db-audit-log/serverless/interface'
import { getErrorMessage } from 'dbaas/services/errorCodes'
import useStores from 'dbaas/stores/useStores'

import { useEssentialDBAuditLogContext } from '../../context/starter-context'

interface ActionBtnsProps {
  onCancel: () => void
  onSucc: () => void
  clusterId?: string
  isConfirmDisabled?: boolean
  cancelText?: string
  confirmText?: string
}

export const ActionBtns = observer(
  ({ onCancel, onSucc, cancelText, confirmText, clusterId, isConfirmDisabled }: ActionBtnsProps) => {
    const configUpdater = useDatabaseAuditLogServiceUpdateAuditLogConfig()
    const { watch, handleSubmit } = useFormContext()
    const {
      store: { tenantData, activeProjectId }
    } = useStores()
    const { config } = useEssentialDBAuditLogContext()

    const storageType = watch('storage_type')

    const isTiDBCloud = storageType === CloudStorageTypeEnum.TIDB_CLOUD

    const confirmTextPrefix = useMemo(() => {
      return isTiDBCloud ? '' : 'Test Connection and'
    }, [isTiDBCloud])

    const submitHandler = async (values) => {
      const dataKey = storageType.toLowerCase()
      if (storageType === CloudStorageTypeEnum.GCS) {
        values.gcs.service_account_key = values.gcs.service_account_key?.content ?? ''
      }

      const data = {
        ...config,
        cluster_id: clusterId ?? '',
        cloud_storage: {
          type: storageType,
          [dataKey]: {
            ...values[dataKey]
          }
        }
      } as AuditLogConfig
      delete data.base_resp

      try {
        await configUpdater.mutateAsync({
          clusterId: clusterId ?? '',
          orgId: tenantData.id,
          projectId: activeProjectId,
          data: {
            audit_log_config: data
          }
        })
        onSucc()
      } catch (_e) {}
    }

    return (
      <>
        {!configUpdater.isLoading && configUpdater.isError && (
          <Alert color="red" mt="lg" icon={<IconXCircle />}>
            {getErrorMessage(configUpdater.error, true)}
          </Alert>
        )}

        <Divider mx={-24} mt="lg" />
        <Group justify="flex-end" mt={16} gap={16}>
          <Button variant="outline" onClick={onCancel}>
            {cancelText ?? 'Cancel'}
          </Button>
          <Button
            type="submit"
            loading={configUpdater.isLoading}
            disabled={isConfirmDisabled}
            onClick={handleSubmit(submitHandler)}
          >
            {confirmText ?? `${confirmTextPrefix} ${config?.enabled ? 'Save' : 'Next'}`}
          </Button>
        </Group>
      </>
    )
  }
)

export default ActionBtns