import { Box, Modal, SegmentedControl, Typography } from '@tidbcloud/uikit'
import { observer } from 'mobx-react'
import { useEffect, useMemo, useState } from 'react'

import { SharedCluster } from 'dbaas/features/ClusterManagement/cluster'
import { CloudProviderConst } from 'dbaas/features/Project'
import {
  Dedicatedv1beta1AuditLogConfig,
  AuditLogConfigBucketManager
} from 'dbaas/services/api-clients/v2023/dedicated/v1beta1/interface'
import useStores from 'dbaas/stores/useStores'

import { useDedicatedDBAuditLogContext } from '../../context/dedicated-context'
import { CONFIG_STEP } from '../../helper'

import StoredInCustomer from './StoredInCustomer'
import StoredInTiDB from './StoredInTiDB'

interface AuditLogEnableModalProps {
  opened: boolean
  cluster: SharedCluster
  orgId: string
  projectId: string
  config: Dedicatedv1beta1AuditLogConfig | undefined
  onClose: () => void
  onCancel?: () => void
}

const AuditLogEditModal = observer(
  ({ opened, cluster, orgId, projectId, config, onClose }: AuditLogEnableModalProps) => {
    const {
      store: { config: whiteListConfig }
    } = useStores()
    const { setConfigStep, configStep } = useDedicatedDBAuditLogContext()
    const [curConfig, setCurConfig] = useState(config)
    const managedBy = useMemo(() => {
      return (curConfig as Dedicatedv1beta1AuditLogConfig)?.bucketManager ?? ''
    }, [curConfig])

    useEffect(() => {
      setCurConfig(config)
    }, [config])

    useEffect(() => {
      if (opened) {
        setConfigStep(CONFIG_STEP.Config)
      }
    }, [opened])

    return (
      <Modal
        title={config ? 'Database Audit Log Storage Configuration' : 'Enable Database Audit Logging'}
        opened={opened}
        onClose={onClose}
        size={cluster.provider === CloudProviderConst.AZURE ? 560 : 800}
        centered
        trapFocus={false}
        closeOnClickOutside={false}
      >
        {whiteListConfig.enableAuditLogStoreTiDB &&
          cluster?.provider === CloudProviderConst.AWS &&
          configStep === CONFIG_STEP.Config && (
            <Box mb={24}>
              <Typography mb={8} variant="label-lg">
                Log Storage Location
              </Typography>
              <SegmentedControl
                fullWidth
                name="managedBy"
                value={
                  (curConfig as Dedicatedv1beta1AuditLogConfig)?.bucketManager ?? AuditLogConfigBucketManager.CUSTOMER
                }
                onChange={(value) => {
                  const c = { ...curConfig } as any
                  c.bucketManager = value as AuditLogConfigBucketManager
                  setCurConfig(c)
                }}
                data={[
                  {
                    label: 'Customer Storage',
                    value: AuditLogConfigBucketManager.CUSTOMER
                  },
                  {
                    label: 'TiDB Cloud Storage',
                    value: AuditLogConfigBucketManager.PINGCAP
                  }
                ]}
              />
            </Box>
          )}

        {managedBy === AuditLogConfigBucketManager.PINGCAP ? (
          <StoredInTiDB cluster={cluster} orgId={orgId} projectId={projectId} onClose={onClose} />
        ) : (
          <StoredInCustomer cluster={cluster} opened={opened} orgId={orgId} projectId={projectId} onClose={onClose} />
        )}
      </Modal>
    )
  }
)

export default AuditLogEditModal