import { Box, Button, Divider, Group, Stack } from '@tidbcloud/uikit'
import { observer } from 'mobx-react'
import { useId } from 'react'
import { FormProvider } from 'react-hook-form'

import { CloudProviderConst } from 'dbaas/features/Project'
import { useRegionVpcInfo } from 'dbaas/features/Project/network/vpc-peering/common'
import {
  GcpVpcPeerCreationFields,
  TidbGcpVpcInfoBlock,
  useGcpVpcPeerCreationForm
} from 'dbaas/features/Project/network/vpc-peering/gcp'

interface GcpVpcPeerCreationForConnectProps {
  region: string
  onCancel: () => void
  onBack: () => void
  onConfirm: () => void
}

export const GcpVpcPeerCreationForConnect = observer(
  ({ region, onCancel, onBack, onConfirm }: GcpVpcPeerCreationForConnectProps) => {
    const formId = useId()
    const { formContext, onSubmit, submitting } = useGcpVpcPeerCreationForm({
      defaultValues: {
        tidbRegion: region
      },
      onSuccess: onConfirm
    })
    const { loading: isRegionInfoLoading, regionAvailable, tidbVpcInfo } = useRegionVpcInfo('gcp', region)

    return (
      <FormProvider {...formContext}>
        <Box component="form" id={formId} onSubmit={onSubmit}>
          <Stack justify="flex-start" gap="xl" p="xl">
            <TidbGcpVpcInfoBlock
              visible={!!region}
              loading={isRegionInfoLoading}
              available={regionAvailable}
              networkName={tidbVpcInfo?.vpcId || ''}
              cidr={tidbVpcInfo?.cidr || ''}
            />
            {regionAvailable && <Divider color="carbon.4" mx="-xl" />}
            <GcpVpcPeerCreationFields autofocus />
          </Stack>
        </Box>
        <Divider color="carbon.4" />
        <Group justify="flex-end" py="md" px="xl">
          <Button
            variant="default"
            onClick={onCancel}
            data-mp-event="Cancel creating VPC Peering button clicked"
            data-mp-provider={CloudProviderConst.GCP}
          >
            Cancel
          </Button>
          <Button
            variant="default"
            disabled={submitting}
            onClick={onBack}
            data-mp-event="Go back button on creating VPC Peering modal clicked"
            data-mp-provider={CloudProviderConst.GCP}
          >
            Back
          </Button>
          <Button
            type="submit"
            form={formId}
            disabled={!regionAvailable}
            loading={submitting}
            data-mp-event="Confirm creating VPC Peering button clicked"
            data-mp-provider={CloudProviderConst.GCP}
          >
            Create
          </Button>
        </Group>
      </FormProvider>
    )
  }
)