import { Modal } from '@tidbcloud/uikit'
import { Form } from '@tidbcloud/uikit/biz'
import { observer } from 'mobx-react'
import { useEffect } from 'react'
import { useForm } from 'react-hook-form'

import { SharedCluster } from 'dbaas/features/ClusterManagement/cluster'
import { Dedicatedv1beta1AuditLogConfig } from 'dbaas/services/api-clients/v2023/dedicated/v1beta1/interface'

import { LogSettings } from './LogSettings'

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

export const LogSettingsModal = observer(
  ({ opened, clusterId, cluster, orgId, projectId, config, onCancel }: LogSettingsModalProps) => {
    const form = useForm()

    useEffect(() => {
      if (!opened || !config?.enabled) {
        return
      }

      form.reset({
        ...config,
        redacted: !config.unredacted,
        rotationPolicy: {
          maxAgeSecond: config.rotationPolicy?.maxAgeSecond?.toString(),
          maxSizeMib: config.rotationPolicy?.maxSizeMib?.toString()
        }
      })
    }, [config, form, opened])

    return (
      <Modal
        opened={opened}
        centered
        trapFocus={false}
        size={800}
        title="Database Audit Logging Settings"
        closeOnClickOutside={false}
        onClose={onCancel}
      >
        <Form layout="none" form={form} withActions={false} onSubmit={() => {}} onCancel={() => {}}>
          <LogSettings
            isUpdate={true}
            cluster={cluster}
            clusterId={clusterId}
            orgId={orgId}
            projectId={projectId}
            onCancel={onCancel}
          />
        </Form>
      </Modal>
    )
  }
)