import { Box, Divider, Group, HoverCard, Loader, Typography } from '@tidbcloud/uikit'
import { FormSelect } from '@tidbcloud/uikit/biz'
import { useDisclosure } from '@tidbcloud/uikit/hooks'
import { IconInfoCircle } from '@tidbcloud/uikit/icons'
import { useFormContext } from 'react-hook-form'

import { useAccessCheck } from 'dbaas/contexts/access-control'
import {
  PROJECT_ACCESS_DOC_LINK,
  PROJECT_ACCESS_LINK_TEXT,
  getProjectAccessRequiredMessageSuffix,
  getProjectAccessRequiredPlan
} from 'dbaas/screens/NextGen/shared/access/create-resource-role-helpers'
import { ProjectEditModal } from 'dbaas/screens/OrgSettings/features/Projects/EditModal'
import { eventTracking, MixpanelEvents } from 'dbaas/utils/tracking'

interface ProjectGroupSectionProps {
  projectOptions: { value: string; label: string }[]
  isLoading?: boolean
  disabled?: boolean
  onProjectCreated?: () => void
  optional?: boolean
}

export const PROJECT_SELECTOR_WIDTH = 224

export function ProjectGroupSection({
  projectOptions,
  isLoading,
  disabled,
  onProjectCreated,
  optional = true
}: ProjectGroupSectionProps) {
  const [createProjectOpened, createProjectHandlers] = useDisclosure(false)
  const canCreateProject = useAccessCheck('OrgProjectsAction')
  const { formState, getFieldState: getFormFieldState } = useFormContext<{ projectId?: string }>()
  const projectIdError = getFormFieldState('projectId', formState).error?.message
  const noTiDBxErrorPlan = getProjectAccessRequiredPlan(projectIdError)
  const isNoTiDBxError = noTiDBxErrorPlan !== null
  const projectError = noTiDBxErrorPlan ? (
    <>
      No{' '}
      <a
        href={PROJECT_ACCESS_DOC_LINK}
        target="_blank"
        rel="noreferrer"
        style={{ color: 'inherit', textDecoration: 'underline' }}
        data-mp-event="Project Access Learn More Clicked"
        data-testid="project-group-section-access-doc-link"
      >
        {PROJECT_ACCESS_LINK_TEXT}
      </a>
      {getProjectAccessRequiredMessageSuffix(noTiDBxErrorPlan)}
    </>
  ) : undefined

  return (
    <Box w={PROJECT_SELECTOR_WIDTH} sx={{ flexShrink: 1 }} data-testid="project-group-section">
      <FormSelect
        name="projectId"
        label={
          <Group gap={4} align="center">
            <span>Project</span>
            {optional && (
              <Typography component="span" c="carbon.7">
                (Optional)
              </Typography>
            )}
            <HoverCard withArrow withinPortal shadow="md">
              <HoverCard.Target>
                <IconInfoCircle size={14} c="carbon.7" sx={{ cursor: 'pointer' }} />
              </HoverCard.Target>
              <HoverCard.Dropdown maw={320}>
                <Typography variant="body-md">
                  Dedicated projects can only host Dedicated clusters and are not listed here.{' '}
                  <a
                    href={PROJECT_ACCESS_DOC_LINK}
                    target="_blank"
                    rel="noreferrer"
                    data-mp-event="Project Access Learn More Clicked"
                  >
                    Learn more
                  </a>
                  .
                </Typography>
              </HoverCard.Dropdown>
            </HoverCard>
          </Group>
        }
        placeholder="Select a project"
        data={projectOptions}
        clearable={optional}
        searchable
        disabled={disabled || isLoading}
        onClear={() => {
          eventTracking(MixpanelEvents.TidbResource.Create.ClearClicked, { target: 'Project' })
        }}
        w="100%"
        {...(isNoTiDBxError ? { error: projectError } : {})}
        rightSection={isLoading ? <Loader size="xs" /> : undefined}
        nothingFoundMessage={
          <>
            <Typography variant="body-lg" c="carbon.6" pb="sm">
              No projects available
            </Typography>
            {canCreateProject && (
              <>
                <Divider />
                <Typography
                  variant="action-md"
                  onClick={() => createProjectHandlers.open()}
                  pt="sm"
                  sx={{ fontWeight: 500, cursor: 'pointer' }}
                  data-testid="project-group-section-create-project"
                >
                  + Create a Project
                </Typography>
              </>
            )}
          </>
        }
        data-testid="project-group-section-select"
      />

      <ProjectEditModal
        createMode="tidbx-only"
        project={undefined}
        opened={createProjectOpened}
        onClose={createProjectHandlers.close}
        onFinish={onProjectCreated}
      />
    </Box>
  )
}