import {
  ActionIcon,
  Badge,
  Box,
  Combobox,
  Group,
  Highlight,
  Input,
  Menu,
  ScrollArea,
  Stack,
  Typography
} from '@tidbcloud/uikit'
import { IconArrowRight, IconBuilding05, IconCheck, IconSearchMd } from '@tidbcloud/uikit/icons'
import { observer } from 'mobx-react'
import { useMemo, useState } from 'react'

import { ORG_TYPE } from 'dbaas/features/Organization'
import { CentralUserProfileOrg } from 'dbaas/services/account/interface'
import useStores from 'dbaas/stores/useStores'
import { eventTracking } from 'dbaas/utils/tracking'

import { useOrgSwitch } from './useNavigationSwitch'

export const OrgPanel = ({
  onClickNextLayer,
  onNavigation
}: {
  onClickNextLayer: (org: CentralUserProfileOrg) => void
  onNavigation: (orgId: string) => void
}) => {
  const [search, setSearch] = useState('')

  return (
    <Box h={354}>
      <Stack gap={4}>
        <Input
          pr={8}
          size="sm"
          placeholder="Find organization..."
          leftSection={<IconSearchMd size={16} c="gray.9" />}
          value={search}
          onChange={(e) => setSearch(e.currentTarget.value)}
          onClick={() => {
            eventTracking('Click search organization', {
              source: 'Global Side Navbar Switcher NextGen'
            })
          }}
        />
        <ScrollArea.Autosize type="scroll" mah={430} scrollbarSize="var(--combobox-padding)" offsetScrollbars="y">
          <OrgList search={search.trim()} onClickNextLayer={onClickNextLayer} onNavigation={onNavigation} />
        </ScrollArea.Autosize>
      </Stack>
    </Box>
  )
}

const OrgList = observer(
  ({
    search,
    onClickNextLayer,
    onNavigation
  }: {
    search: string
    onClickNextLayer: (org: CentralUserProfileOrg) => void
    onNavigation: (orgId: string) => void
  }) => {
    const {
      store: { userProfile }
    } = useStores()
    const orgs = useMemo(() => {
      return userProfile.orgs.filter((o) => o.name.toLowerCase().includes(search.toLowerCase()))
    }, [userProfile.orgs, search])

    return (
      <Menu>
        {!orgs.length && (
          <Typography variant="body-lg" c="carbon.7" px={12}>
            No organization
          </Typography>
        )}
        {orgs.map((org) => {
          return (
            <OrgListItem
              key={org.id}
              org={org}
              search={search}
              onClickNextLayer={onClickNextLayer}
              onNavigation={onNavigation}
            />
          )
        })}
      </Menu>
    )
  }
)

const OrgListItem = observer(
  ({
    org,
    search,
    onClickNextLayer,
    onNavigation
  }: {
    org: CentralUserProfileOrg
    search: string
    onClickNextLayer: (org: CentralUserProfileOrg) => void
    onNavigation: (orgId: string) => void
  }) => {
    const {
      store: {
        lastVisitLocation: { orgId }
      }
    } = useStores()
    const isOrgSelected = orgId === org.id
    const orgSwitch = useOrgSwitch()
    const isOtherOrgSwitch = orgId !== org.id

    return (
      <Group gap={4} justify="space-between" wrap="nowrap">
        <Combobox.Option
          key={org.id}
          value={org.id}
          onClick={async () => {
            eventTracking('Organization Changed', {
              source: 'Global Side Navbar Switcher NextGen',
              isOtherOrgSwitch
            })
            onNavigation(org.id)
            orgSwitch(org)
          }}
          sx={{
            flexGrow: 1,
            wordBreak: 'break-all'
          }}
        >
          <Group gap="xs" justify="space-between" wrap="nowrap">
            <Group gap={8} wrap="nowrap">
              <Group sx={{ flexShrink: 0 }}>
                <IconBuilding05 size={16} c="carbon.8" strokeWidth={1} />
              </Group>
              <Highlight highlight={search}>{org.name || `Org (ID: ${org.id})`}</Highlight>
              {org.org_type === ORG_TYPE.ENTERPRISE && (
                <Badge sx={{ pointerEvents: 'none', flexShrink: 0 }}>Ent.</Badge>
              )}
            </Group>
            <Group gap={8} wrap="nowrap">
              {isOrgSelected && <IconCheck c="peacock.7" />}
            </Group>
          </Group>
        </Combobox.Option>

        <ActionIcon
          variant="subtle"
          color="carbon"
          size="md"
          my={-8}
          w={33.7}
          h={33.7}
          sx={{
            flexShrink: 0
          }}
          onClick={async (e) => {
            e.stopPropagation()
            onClickNextLayer(org)
            eventTracking('Click go to cluster panel', {
              source: 'Global Side Navbar Switcher NextGen'
            })
          }}
        >
          <IconArrowRight />
        </ActionIcon>
      </Group>
    )
  }
)