import { ActionIcon, Badge, Flex, HoverCard, Modal, Typography } from '@tidbcloud/uikit'
import { ExpandNavbarButtonPlaceholder } from '@tidbcloud/uikit/biz'
import { IconDataServiceAdd } from '@tidbcloud/uikit/icons'
import { useEffect, useState } from 'react'

import useQuery from 'dbaas/utils/useQuery'

import { useDataApiContext } from '../context'
import CreateForm from '../CreateApp/CreateForm'
import { clearCreateFormStorageDatas } from '../helpers'

const Header = () => {
  const { setIsReposConflict, setDirectoryErrInfo, createDataAppFromLogs, setCreateDataAppFromLogs } =
    useDataApiContext()
  const query = useQuery()
  const createType = query.get('type')

  const [createModalOpened, setCreateModalOpened] = useState(
    !['""', '', null].includes(localStorage.getItem('github_auth_request_id'))
  )

  useEffect(() => {
    if (createType) {
      setCreateModalOpened(true)
    }
  }, [])

  useEffect(() => {
    if (createDataAppFromLogs) {
      setCreateModalOpened(true)
    }
  }, [createDataAppFromLogs])

  useEffect(() => {
    if (!createModalOpened) {
      setCreateDataAppFromLogs(false)
    }
  }, [createModalOpened])

  const clear = () => {
    setCreateModalOpened(false)
    clearCreateFormStorageDatas()
    setIsReposConflict(false)
    setDirectoryErrInfo('')
  }

  return (
    <>
      <Flex justify="space-between" align="center" wrap="nowrap" h={32} m={16}>
        <Flex align="center" wrap="nowrap" gap={8}>
          <ExpandNavbarButtonPlaceholder />
          <Typography variant="title-lg" fw={500} lineClamp={1} sx={{ flexShrink: 0 }}>
            Data Service
          </Typography>
          <Badge variant="outline" size="sm" color="carbon" c="carbon.7" fw={500}>
            Preview
          </Badge>
        </Flex>

        <Flex gap="sm">
          <HoverCard withArrow position="left" shadow="md">
            <HoverCard.Target>
              <ActionIcon
                aria-label="Create Data App"
                variant="transparent"
                color="carbon.8"
                sx={(theme) => ({
                  '&:hover': {
                    backgroundColor: theme.colors.carbon[4]
                  },
                  height: 26,
                  minHeight: 26
                })}
                data-testid="create-data-app-more"
                data-mp-event="Data Service Create Data App Button Clicked"
                data-mp-source="side menu"
                onClick={() => setCreateModalOpened(true)}
              >
                <IconDataServiceAdd size={16} />
              </ActionIcon>
            </HoverCard.Target>
            <HoverCard.Dropdown>Create DataApp</HoverCard.Dropdown>
          </HoverCard>
        </Flex>
      </Flex>

      <Modal
        size={840}
        centered
        trapFocus={false}
        opened={createModalOpened}
        title="Create Data App"
        closeOnClickOutside={false}
        onClose={clear}
      >
        <CreateForm onCancel={clear} />
      </Modal>
    </>
  )
}

export default Header