function CustomAMISettings()

in frontend/src/old-pages/Configure/Components.tsx [230:333]
70 lines of code
14 McCabe index (conditional complexity)

function CustomAMISettings({basePath, appPath, errorsPath, validate}: any) {
  const editing = useState(['app', 'wizard', 'editing'])
  const customImages = useState(['app', 'wizard', 'customImages']) || []
  const officialImages = useState(['app', 'wizard', 'officialImages']) || []
  const error = useState([...errorsPath, 'customAmi'])

  const customAmiPath = useMemo(
    () => [...basePath, 'Image', 'CustomAmi'],
    [basePath],
  )
  const customAmi = useState(customAmiPath)
  const customAmiEnabled =
    useState([...appPath, 'customAMI', 'enabled']) || false

  const osPath = ['app', 'wizard', 'config', 'Image', 'Os']
  const os = useState(osPath) || 'alinux2'

  const {t} = useTranslation()

  var suggestions = []
  for (let image of customImages) {
    suggestions.push({
      value: image.ec2AmiInfo.amiId,
      description: `${image.ec2AmiInfo.amiId} (${image.imageId})`,
    })
  }

  for (let image of officialImages)
    if (image.os === os) {
      suggestions.push({
        value: image.amiId,
        description: `${image.amiId} (${image.name})`,
      })
    }

  const toggleCustomAmi = () => {
    const value = !customAmiEnabled
    setState([...appPath, 'customAMI', 'enabled'], value)
    if (!value) {
      clearState(customAmiPath)
      if (Object.keys(getState([...basePath, 'Image'])).length === 0)
        clearState([...basePath, 'Image'])
    }
  }

  const selectText = useCallback(
    (value: string) => {
      if (value !== customAmi) {
        setState(customAmiPath, value)
      }
      return value
    },
    [customAmi, customAmiPath],
  )

  const helpPanelFooter = useMemo(
    () => [
      {
        title: t('wizard.components.customAmi.helpPanel.imageLink.title'),
        href: t('wizard.components.customAmi.helpPanel.imageLink.href'),
      },
    ],
    [t],
  )

  return (
    <SpaceBetween size="xxs">
      <CheckboxWithHelpPanel
        checked={customAmiEnabled}
        disabled={editing}
        onChange={toggleCustomAmi}
        helpPanel={
          <TitleDescriptionHelpPanel
            title={t('wizard.components.customAmi.helpPanel.title')}
            description={t('wizard.components.customAmi.helpPanel.description')}
            footerLinks={helpPanelFooter}
          />
        }
      >
        {t('wizard.components.customAmi.label')}
      </CheckboxWithHelpPanel>
      {customAmiEnabled && (
        <FormField
          label={t('wizard.components.customAmi.suggestLabel')}
          errorText={error}
        >
          <Autosuggest
            onChange={({detail}) => {
              if (detail.value !== customAmi) {
                setState(customAmiPath, detail.value)
              }
            }}
            value={customAmi || ''}
            enteredTextLabel={selectText}
            ariaLabel="Custom AMI Selector"
            placeholder="AMI ID"
            empty="No matches found"
            options={suggestions}
          />
        </FormField>
      )}
    </SpaceBetween>
  )
}