import { Button, Card, Group, Loader, Typography } from '@tidbcloud/uikit'
import { DotBadge } from '@tidbcloud/uikit/biz'
import { useDisclosure } from '@tidbcloud/uikit/hooks'
import { observer } from 'mobx-react'

import { AccessGuard, useAccessCheck } from 'dbaas/contexts/access-control'
import { useGetAIUserSetting } from 'dbaas/services/api'
import useStores from 'dbaas/stores/useStores'

import { BlockHeader } from '../../components'

import { AIDisabling } from './Disabling'
import { AIEnabling } from './Enabling'

export const AI = observer(() => {
  const {
    store: {
      lastVisitLocation: { orgId, projectId }
    }
  } = useStores()
  const aiPrivacyAccessible = useAccessCheck('AccountPrivacyAIGate')
  const aiPrivacyQuery = useGetAIUserSetting(orgId, projectId, {
    query: {
      enabled: !!(orgId && projectId && aiPrivacyAccessible),
      select: (response) => response?.data?.is_privacy_allowed,
      refetchOnWindowFocus: false
    }
  })
  const aiEnabled = !!aiPrivacyQuery.data

  const [disablingOpened, disablingHandlers] = useDisclosure()
  const onDisableConfirm = async () => {
    await aiPrivacyQuery.refetch()
    disablingHandlers.close()
  }
  const [enablingOpened, enablingHandlers] = useDisclosure()
  const onEnableConfirm = async () => {
    await aiPrivacyQuery.refetch()
    enablingHandlers.close()
  }

  return (
    <AccessGuard id="AccountPrivacyAIGate">
      <Card p="xl">
        <BlockHeader
          title={
            <Group gap="md">
              <Typography variant="title-lg">AI-powered Data Exploration</Typography>
              {aiPrivacyQuery.isLoading ? (
                <Loader size="xs" />
              ) : (
                <DotBadge color={aiEnabled ? 'green' : 'gray'}>{aiEnabled ? 'Enabled' : 'Disabled'}</DotBadge>
              )}
            </Group>
          }
          titleProps={{ variant: 'label-lg', fw: 600 }}
          description="Al-powered data exploration will 10-times accelerate your journey of data insights."
          rightSection={
            aiEnabled ? (
              <Button
                color="red"
                variant="light"
                disabled={aiPrivacyQuery.isLoading}
                onClick={disablingHandlers.open}
                size="sm"
                data-mp-event="AI-Powered Functions Privacy Disable Button Clicked"
              >
                Disable
              </Button>
            ) : (
              <Button
                disabled={aiPrivacyQuery.isLoading}
                onClick={enablingHandlers.open}
                size="sm"
                data-mp-event="AI-Powered Functions Privacy Enable Button Clicked"
              >
                Enable
              </Button>
            )
          }
        />
      </Card>
      <AIDisabling
        opened={disablingOpened}
        onClose={disablingHandlers.close}
        onConfirm={onDisableConfirm}
        updating={aiPrivacyQuery.isRefetching}
      />
      <AIEnabling
        opened={enablingOpened}
        onClose={enablingHandlers.close}
        onConfirm={onEnableConfirm}
        updating={aiPrivacyQuery.isRefetching}
      />
    </AccessGuard>
  )
})