import { ActionIcon, Button, Flex, HoverCard, Loader, Modal, Switch, Typography, notifier } from '@tidbcloud/uikit'
import { IconSettings02 } from '@tidbcloud/uikit/icons'
import { useEffect, useState } from 'react'

import { useUpdateAppLogResponseBody } from 'dbaas/services/dataservice'

const RequestBodySetting = ({
  orgId,
  projectId,
  appId,
  logBodyStatus
}: {
  orgId: string
  projectId: string
  appId: string
  logBodyStatus: boolean
}) => {
  const updateResponseBodyutation = useUpdateAppLogResponseBody()
  const [isEnableBodyOpened, setIsEnableBodyOpened] = useState(false)
  const [isLogBodyEnabled, setIsLogBodyEnabled] = useState(logBodyStatus)

  useEffect(() => {
    setIsLogBodyEnabled(logBodyStatus)
  }, [logBodyStatus])

  const updateResponseBodyHandler = async (on: boolean) => {
    const _res = await updateResponseBodyutation.mutateAsync({
      orgId,
      projectId,
      appId,
      data: {
        new_status: on ? 'on' : 'off'
      }
    })
    if (_res?.code === 0) {
      setIsLogBodyEnabled(on)
      setIsEnableBodyOpened(false)
    } else {
      _res.message && notifier.error(_res.message)
    }
  }

  return (
    <>
      <HoverCard width={280} shadow="md">
        <HoverCard.Target>
          <ActionIcon aria-label="Request Body Setting" variant="subtle">
            <IconSettings02 size={16} />
          </ActionIcon>
        </HoverCard.Target>

        <HoverCard.Dropdown>
          <Flex justify="space-between">
            <Typography variant="title-md">Log response body</Typography>
            {updateResponseBodyutation.isLoading ? (
              <Loader size="xs" />
            ) : (
              <Switch
                checked={isLogBodyEnabled}
                onChange={(e) => {
                  if (!e.target.checked) {
                    updateResponseBodyHandler(false)
                  } else {
                    setIsEnableBodyOpened(true)
                  }
                }}
              />
            )}
          </Flex>
          <Typography variant="body-md" mt={12}>
            Capture detailed server responses by enabling response body logging.
          </Typography>
        </HoverCard.Dropdown>
      </HoverCard>

      <Modal
        title="Are you sure to enable log response body?"
        opened={isEnableBodyOpened}
        size={500}
        centered
        trapFocus={false}
        onClose={() => setIsEnableBodyOpened(false)}
      >
        <Typography variant="body-lg">
          Enabling this option can increase log size. All log information will be stored as is. Make sure to redact any
          sensitive information within the response logs.
        </Typography>

        <Typography variant="body-lg" mt={12}>
          Regardless of whether this switch is enabled or not, any error response will always display a response body.
        </Typography>

        <Flex justify="end">
          <Button variant="subtle" color="carbon.8" onClick={() => setIsEnableBodyOpened(false)}>
            Cancel
          </Button>
          <Button
            variant="subtle"
            color="red"
            loading={updateResponseBodyutation.isLoading}
            onClick={() => updateResponseBodyHandler(true)}
          >
            Yes, Enable
          </Button>
        </Flex>
      </Modal>
    </>
  )
}

export default RequestBodySetting