import { Stack, Typography } from '@tidbcloud/uikit'
import { FormSwitch } from '@tidbcloud/uikit/biz'

import { eventTracking, MixpanelEvents } from 'dbaas/utils/tracking'

export const FormEventSplit = ({ name }: { name: string }) => {
  return (
    <Stack gap={8}>
      <Typography variant="label-lg">Output Raw Change Event</Typography>
      <FormSwitch
        name={name}
        onChange={(e) => {
          eventTracking(MixpanelEvents.DedicatedChangefeed.Enable.ButtonClicked, {
            field: 'output_raw_change_event',
            value: e.target.checked
          })
        }}
        label={
          <div>
            Output raw change events without splitting UPDATE events. Learn more about{' '}
            <a
              href="https://docs.pingcap.com/tidb/v8.1/ticdc-split-update-behavior/"
              target="_blank"
              rel="noopener noreferrer"
              data-mp-event="Event Splitting Link Clicked"
            >
              TiCDC Behavior in Splitting UPDATE Events
            </a>
            .
          </div>
        }
      />
    </Stack>
  )
}