import { Button, Divider, Group, Modal, notifier } 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 { useDatabaseAuditLogServiceUpdateAuditLogConfig } from 'dbaas/services/db-audit-log/serverless'
import { getErrorMessage } from 'dbaas/services/errorCodes'
import useStores from 'dbaas/stores/useStores'

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

interface SettingModalProps {
  clusterId?: string
  opened: boolean
  onClose: () => void
  onSucc: () => void
}

export const SettingModal = observer(({ opened, clusterId, onClose, onSucc }: SettingModalProps) => {
  const {
    store: { tenantData, activeProjectId }
  } = useStores()
  const { config } = useEssentialDBAuditLogContext()

  const form = useForm({
    mode: 'onChange'
  })

  const {
    getValues,
    setValue,
    formState: { isValid }
  } = form
  const configUpdater = useDatabaseAuditLogServiceUpdateAuditLogConfig()

  const enableHandler = async () => {
    const values = getValues()

    try {
      await configUpdater.mutateAsync({
        clusterId: clusterId ?? '',
        orgId: tenantData.id,
        projectId: activeProjectId,
        data: {
          audit_log_config: {
            cluster_id: clusterId ?? '',
            enabled: true,
            unredacted: !values?.redacted,
            rotation_interval_minutes: Number(values?.intervalMinutes),
            rotation_size_mib: Number(values?.maxSizeMib)
          }
        }
      })

      onSucc()
    } catch (e) {
      notifier.error(getErrorMessage(e, true))
    }
  }

  useEffect(() => {
    if (!opened || !form) {
      return
    }

    setValue('intervalMinutes', config?.rotation_interval_minutes ?? '10')
    setValue('maxSizeMib', `${config?.rotation_size_mib ?? 100}`)
    setValue('redacted', !config?.unredacted)
  }, [opened, form])

  return (
    <Modal opened={opened} size={800} title="Database Audit Logging Settings" onClose={onClose}>
      <Form layout="none" form={form} withActions={false} onSubmit={() => {}} onCancel={() => {}}>
        <LogSetting
          maxSizeName="maxSizeMib"
          maxAgeSecondName="intervalMinutes"
          minAgeSecondsNumber={10}
          maxAgeSecondsNumber={1440}
          minSizeNumber={10}
          maxSizeNumber={1024}
          fileSizeMode="input"
          rotationMode="input"
          redactedName="redacted"
          entityName="instance"
        />

        <Divider mt="lg" mx="-24" />
        <Group justify="flex-end" mt="lg">
          <Button variant="outline" onClick={onClose}>
            Cancel
          </Button>
          <Button loading={configUpdater.isLoading} disabled={!isValid} onClick={enableHandler}>
            Save
          </Button>
        </Group>
      </Form>
    </Modal>
  )
})

export default SettingModal