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 {
  AwsVpcPeerCreationFields,
  TidbAwsVpcInfoBlock,
  useAwsVpcPeerCreationForm
} from 'dbaas/features/Project/network/vpc-peering/aws'
import { useRegionVpcInfo } from 'dbaas/features/Project/network/vpc-peering/common'

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

export const AwsVpcPeerCreationForConnect = observer(
  ({ region, onCancel, onBack, onConfirm }: AwsVpcPeerCreationForConnectProps) => {
    const formId = useId()
    const { formContext, onSubmit, submitting } = useAwsVpcPeerCreationForm({
      defaultValues: {
        tidbRegion: region
      },
      onSuccess: onConfirm
    })
    const { loading: isRegionInfoLoading, regionAvailable, tidbVpcInfo } = useRegionVpcInfo('aws', region)

    return (
      <FormProvider {...formContext}>
        <Box component="form" id={formId} onSubmit={onSubmit}>
          <Stack justify="flex-start" gap="xl" p="xl">
            <TidbAwsVpcInfoBlock
              visible={!!region}
              loading={isRegionInfoLoading}
              available={regionAvailable}
              vpcId={tidbVpcInfo?.vpcId || ''}
              cidr={tidbVpcInfo?.cidr || ''}
            />
            {regionAvailable && <Divider color="carbon.4" mx="-xl" />}
            <AwsVpcPeerCreationFields autofocus onRequestSupport={onCancel} />
          </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.AWS}
          >
            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.AWS}
          >
            Back
          </Button>
          <Button
            type="submit"
            form={formId}
            disabled={!regionAvailable}
            loading={submitting}
            data-mp-event="Confirm creating VPC Peering button clicked"
            data-mp-provider={CloudProviderConst.AWS}
          >
            Create
          </Button>
        </Group>
      </FormProvider>
    )
  }
)