import { Button, Flex, Typography, Box, Card } from '@tidbcloud/uikit'
import { useDisclosure } from '@tidbcloud/uikit/hooks'

import { useDataApiContext } from '../../context'
import DeployConfig, { DeployBadge } from '../Deployment/Config'

const Configuration = ({ linked }: { linked: boolean }) => {
  const { dataappDeployConfig, updateDeployConfig } = useDataApiContext()
  const [opened, { open, close }] = useDisclosure(false)

  return (
    <Card p={24} h="100%">
      <Flex justify="space-between" align="center">
        <Typography variant="title-md" mb={8}>
          Deployment Configuration
        </Typography>
        <Button
          size="compact-xs"
          h={28}
          variant="default"
          data-mp-event="Data Service config button clicked"
          onClick={open}
        >
          Configure
        </Button>
      </Flex>
      <Box sx={{ whiteSpace: 'break-spaces' }} mt={16}>
        <Typography variant="body-md" component="span">
          Configure the deployment configuration with options for auto sync & deployment (only for GitHub connection)
          and review draft.
        </Typography>
      </Box>
      <Flex gap={16} mt={16}>
        {linked && (
          <DeployBadge enabled={!!dataappDeployConfig?.enable_automatic_deployment} name="Auto Sync & Deployment" />
        )}
        <DeployBadge enabled={!!dataappDeployConfig?.enable_ui_drafts} name="Review Draft" />
      </Flex>

      <DeployConfig
        opened={opened}
        onClose={() => {
          updateDeployConfig()
          close()
        }}
      />
    </Card>
  )
}

export default Configuration