import type { JSX } from 'react';

import { type DataSourceJsonData, type DataSourcePluginOptionsEditorProps } from '@grafana/data';
import { t, Trans } from '@grafana/i18n';

import { InlineSwitch } from '../../components/Switch/Switch';
import { InlineField } from '../Forms/InlineField';
import { Box } from '../Layout/Box/Box';
import { Stack } from '../Layout/Stack/Stack';

export interface Props<T extends DataSourceJsonData>
  extends Pick<DataSourcePluginOptionsEditorProps<T>, 'options' | 'onOptionsChange'> {}

export interface SecureSocksProxyConfig extends DataSourceJsonData {
  enableSecureSocksProxy?: boolean;
}

export function SecureSocksProxySettings<T extends SecureSocksProxyConfig>({
  options,
  onOptionsChange,
}: Props<T>): JSX.Element {
  return (
    <div>
      <h3 className="page-heading">
        <Trans i18nKey="grafana-ui.data-source-settings.secure-socks-heading">Secure Socks Proxy</Trans>
      </h3>
      <Box marginBottom={5}>
        <Stack direction="row" alignItems="flex-start" wrap>
          <Box position="relative" marginBottom={0.5}>
            <Stack direction="row" alignItems="flex-start">
              <InlineField
                labelWidth={26}
                label={t('grafana-ui.data-source-settings.secure-socks-label', 'Enabled')}
                tooltip={t(
                  'grafana-ui.data-source-settings.secure-socks-tooltip',
                  'Connect to this datasource via the secure socks proxy.'
                )}
              >
                <InlineSwitch
                  value={options.jsonData.enableSecureSocksProxy ?? false}
                  onChange={(event) =>
                    onOptionsChange({
                      ...options,
                      jsonData: { ...options.jsonData, enableSecureSocksProxy: event!.currentTarget.checked },
                    })
                  }
                />
              </InlineField>
            </Stack>
          </Box>
        </Stack>
      </Box>
    </div>
  );
}
