import { Box, notifier } from '@tidbcloud/uikit'
import { observer } from 'mobx-react'
import { useEffect, useState } from 'react'
import { useQueryClient } from 'react-query'

import { SharedCluster } from 'dbaas/features/ClusterManagement/cluster'
import {
  databaseAuditLogServiceGetAuditLogConfig,
  getDatabaseAuditLogServiceGetAuditLogConfigQueryKey,
  useDatabaseAuditLogServiceUpdateAuditLogConfig
} from 'dbaas/services/db-audit-log/serverless'
import { getErrorMessage } from 'dbaas/services/errorCodes'
import useStores from 'dbaas/stores/useStores'

import { ConfigLayout } from '../../Components/ConfigLayout'
import { AuditLogDisableModal } from '../../Components/DisableModal'
import { useEssentialDBAuditLogContext } from '../../context/starter-context'

import AuditLogEditModal from './AuditLogEditModal'
import SettingModal from './SettingModal'

type PropsType = {
  cluster: SharedCluster
}

export const LogSwitch = observer(({ cluster }: PropsType) => {
  const configUpdater = useDatabaseAuditLogServiceUpdateAuditLogConfig()
  const queryClient = useQueryClient()
  const {
    store: { tenantData, activeProjectId }
  } = useStores()
  const [disableLogModalOpened, setDisableLogModalOpened] = useState(false)
  const { config, isLoadingConfig } = useEssentialDBAuditLogContext()
  const [isEditModalOpened, setIsEditModalOpened] = useState(false)
  const [isSettingModalOpened, setIsSettingModalOpened] = useState(false)

  const disableHandler = async () => {
    try {
      await configUpdater.mutateAsync({
        clusterId: cluster.id,
        orgId: tenantData.id,
        projectId: activeProjectId,
        data: {
          audit_log_config: {
            enabled: false
          }
        }
      })
    } catch (e) {
      notifier.error(getErrorMessage(e, true))
    }
    refreshConfig()
    setDisableLogModalOpened(false)
  }

  const refreshConfig = () => {
    queryClient.fetchQuery(
      getDatabaseAuditLogServiceGetAuditLogConfigQueryKey(tenantData.id, activeProjectId, cluster?.id ?? ''),
      () => databaseAuditLogServiceGetAuditLogConfig(tenantData.id, activeProjectId, cluster?.id ?? '')
    )
  }

  useEffect(() => {
    if (isSettingModalOpened) {
      setIsEditModalOpened(false)
    }
  }, [isSettingModalOpened])

  return (
    <Box>
      <ConfigLayout
        docLink="https://docs.pingcap.com/tidbcloud/essential-database-audit-logging/?plan=essential"
        onSettingClick={() => setIsSettingModalOpened(true)}
        onConfigureClick={() => setIsEditModalOpened(true)}
        onDisableClick={() => setDisableLogModalOpened(true)}
        onEnableClick={() => setIsEditModalOpened(true)}
        loading={isLoadingConfig}
        enabled={config?.enabled ?? false}
        cluster={cluster}
      />

      <AuditLogDisableModal
        opened={disableLogModalOpened}
        disableHandler={disableHandler}
        loading={configUpdater.isLoading}
        plan="Essential"
        onClose={() => setDisableLogModalOpened(false)}
      />

      <AuditLogEditModal
        opened={isEditModalOpened}
        clusterId={cluster?.id}
        onClose={() => setIsEditModalOpened(false)}
        onSucc={() => {
          if (!config?.enabled) {
            setIsSettingModalOpened(true)
          } else {
            setIsEditModalOpened(false)
          }
        }}
      />

      <SettingModal
        opened={isSettingModalOpened}
        clusterId={cluster?.id}
        onClose={() => setIsSettingModalOpened(false)}
        onSucc={() => {
          setIsSettingModalOpened(false)
          refreshConfig()
        }}
      />
    </Box>
  )
})