import useUrlState from '@ahooksjs/use-url-state'
import { Box, Button, Group, SegmentedControl, Stack } from '@tidbcloud/uikit'
import { useDisclosure } from '@tidbcloud/uikit/hooks'
import { observer } from 'mobx-react'
import { useState } from 'react'

import { AccessDeniedHoverHint, AccessGuard } from 'dbaas/contexts/access-control'
import { CloudProvider } from 'dbaas/features/Project'
import useStores from 'dbaas/stores/useStores'

import { CreationModal } from './Creation'
import { ProviderConst, ProviderLabel } from './helpers'
import { CIDRList } from './List'

export const CIDRHome = observer(() => {
  const {
    store: {
      tenantData: { third_party_account_provider }
    }
  } = useStores()
  const limitedProvider = [ProviderConst.AWS, ProviderConst.GCP, ProviderConst.AZURE].find((p) =>
    third_party_account_provider.toLowerCase().includes(p)
  )

  const [urlState, setUrlState] = useUrlState({ provider: limitedProvider || ProviderConst.AWS })
  const currentProvider: NonNullable<typeof limitedProvider> = urlState.provider

  const [creationOpened, creationHandlers] = useDisclosure(false)
  const [creationProvider, setCreationProvider] = useState(currentProvider)

  const providers: { label: string; value: CloudProvider }[] = [
    { label: ProviderLabel.aws, value: ProviderConst.AWS },
    { label: ProviderLabel.gcp, value: ProviderConst.GCP },
    { label: ProviderLabel.azure, value: ProviderConst.AZURE }
  ]

  return (
    <Stack justify="flex-start">
      {!limitedProvider && (
        <Group justify="space-between">
          <SegmentedControl
            value={currentProvider}
            onChange={(value) => setUrlState({ provider: value })}
            data={providers}
            py={5}
          />
          <AccessDeniedHoverHint id="ProjectNetworkAction">
            {({ accessible }) => (
              <>
                {urlState.provider === ProviderConst.AWS && (
                  <Button
                    size="sm"
                    disabled={!accessible}
                    onClick={() => {
                      setCreationProvider(ProviderConst.AWS)
                      creationHandlers.open()
                    }}
                    data-mp-event="Create AWS CIDR button clicked"
                  >
                    Create CIDR
                  </Button>
                )}
                {urlState.provider === ProviderConst.GCP && (
                  <Button
                    size="sm"
                    disabled={!accessible}
                    onClick={() => {
                      setCreationProvider(ProviderConst.GCP)
                      creationHandlers.open()
                    }}
                    data-mp-event="Create Google Cloud CIDR button clicked"
                  >
                    Create CIDR
                  </Button>
                )}
                {urlState.provider === ProviderConst.AZURE && (
                  <Button
                    size="sm"
                    disabled={!accessible}
                    onClick={() => {
                      setCreationProvider(ProviderConst.AZURE)
                      creationHandlers.open()
                    }}
                    data-mp-event="Create AZURE CIDR button clicked"
                  >
                    Create CIDR
                  </Button>
                )}
              </>
            )}
          </AccessDeniedHoverHint>
        </Group>
      )}
      {limitedProvider && (
        <AccessGuard id="ProjectNetworkAction">
          <Group justify="space-between">
            <Button onClick={creationHandlers.open} data-mp-event="Create CIDR button clicked">
              Create CIDR
            </Button>
          </Group>
        </AccessGuard>
      )}
      <Box mx="-xl">
        <CIDRList provider={currentProvider} />
      </Box>
      <CreationModal
        provider={creationProvider as CloudProvider}
        opened={creationOpened}
        onClose={creationHandlers.close}
        onConfirm={() => setUrlState({ provider: creationProvider })}
      />
    </Stack>
  )
})