import type {ReactNode} from 'react';
import {Fragment, useState} from 'react';
import styled from '@emotion/styled';
import type {ModalRenderProps} from 'sentry/actionCreators/modal';
import {Button} from 'sentry/components/button';
import RadioGroup from 'sentry/components/forms/controls/radioGroup';
import ExternalLink from 'sentry/components/links/externalLink';
import {t, tct} from 'sentry/locale';
import {space} from 'sentry/styles/space';
import type {Organization} from 'sentry/types';
import {
platformEventLinkMap,
PlatformEvents,
} from 'sentry/utils/analytics/integrations/platformAnalyticsEvents';
import {trackIntegrationAnalytics} from 'sentry/utils/integrationUtil';
import withOrganization from 'sentry/utils/withOrganization';
import ExampleIntegrationButton from 'sentry/views/settings/organizationIntegrations/exampleIntegrationButton';
export type CreateNewIntegrationModalOptions = {organization: Organization};
type CreateNewIntegrationModalProps = CreateNewIntegrationModalOptions & ModalRenderProps;
const analyticsView = 'new_integration_modal' as const;
function CreateNewIntegrationModal({
Body,
Header,
Footer,
closeModal,
organization,
}: CreateNewIntegrationModalProps) {
const [option, selectOption] = useState('internal');
const choices = [
[
'internal',
{t('Internal Integration')}
,
{tct(
'Internal integrations are meant for custom integrations unique to your organization. See more info on [docsLink].',
{
docsLink: (
{
trackIntegrationAnalytics(PlatformEvents.INTERNAL_DOCS, {
organization,
view: analyticsView,
});
}}
>
{t('Internal Integrations')}
),
}
)}
,
],
[
'public',
{t('Public Integration')}
,
{tct(
'A public integration will be available for all Sentry users for installation. See more info on [docsLink].',
{
docsLink: (
{
trackIntegrationAnalytics(PlatformEvents.PUBLIC_DOCS, {
organization,
view: analyticsView,
});
}}
>
{t('Public Integrations')}
),
}
)}
,
],
] as [string, ReactNode, ReactNode][];
if (organization.features.includes('sentry-functions')) {
choices.push([
'sentry-fx',
{t('Sentry Function')}
,
{t(
'A Sentry Function is a new type of integration leveraging the power of cloud functions.'
)}
,
]);
}
return (