import { Box, CollapsableSection, Alert, Space, Text } from '@grafana/ui';

import { InfluxVersion } from '../../../types';

import { AdvancedDbConnectionSettings } from './AdvancedDBConnectionSettings';
import { InfluxFluxDBConnection } from './InfluxFluxDBConnection';
import { InfluxInfluxQLDBConnection } from './InfluxInfluxQLDBConnection';
import { InfluxSQLDBConnection } from './InfluxSQLDBConnection';
import { CONFIG_SECTION_HEADERS, CONTAINER_MIN_WIDTH } from './constants';
import { type Props } from './types';

export const DatabaseConnectionSection = ({ options, onOptionsChange }: Props) => (
  <>
    <Box
      borderStyle="solid"
      borderColor="weak"
      padding={2}
      marginBottom={4}
      id={`${CONFIG_SECTION_HEADERS[1].id}`}
      minWidth={CONTAINER_MIN_WIDTH}
    >
      <CollapsableSection
        label={<Text element="h3">{CONFIG_SECTION_HEADERS[1].label}</Text>}
        isOpen={CONFIG_SECTION_HEADERS[1].isOpen}
      >
        {!options.jsonData.version && (
          <Alert severity="info" title="Query language required">
            <p>To view connection settings, first choose a query language in the URL and Connection section.</p>
          </Alert>
        )}
        {options.jsonData.version === InfluxVersion.InfluxQL && (
          <>
            <Alert severity="info" title="Database Access">
              <p>
                Setting the database for this datasource does not deny access to other databases. The InfluxDB query
                syntax allows switching the database in the query. To support data isolation and security, make sure
                appropriate permissions are configured in InfluxDB.
              </p>
            </Alert>
          </>
        )}
        {options.jsonData.version && (
          <>
            <Text color="secondary">
              Provide the necessary database connection details based on your selected InfluxDB product and query
              language.
            </Text>
            <Space v={2} />
          </>
        )}
        <>
          {options.jsonData.version === InfluxVersion.InfluxQL && (
            <InfluxInfluxQLDBConnection options={options} onOptionsChange={onOptionsChange} />
          )}
          {options.jsonData.version === InfluxVersion.Flux && (
            <InfluxFluxDBConnection options={options} onOptionsChange={onOptionsChange} />
          )}
          {options.jsonData.version === InfluxVersion.SQL && (
            <InfluxSQLDBConnection options={options} onOptionsChange={onOptionsChange} />
          )}
          {options.jsonData.version && (
            <AdvancedDbConnectionSettings options={options} onOptionsChange={onOptionsChange} />
          )}
        </>
      </CollapsableSection>
    </Box>
  </>
);
